mousedownでdiv画像を変更し、マウスアップで元に戻す

Question

mousedownで画像を変更し、mouseupで元の画像に戻そうとしています。 mousedownで画像が変化していますが、mouseupで元の画像に戻っていません。 マウスアップ機能のアラートが表示されません...何が問題になりますか？

$(#mydivid).bind('mousedown', function() { 
     document.getElementById(mydivid).style.backgroundImage = "url(Images/new.png)"; 
     alert("mousedown"); 
    }); 



    $(#mydivid).bind('mouseup', function() { 
     document.getElementById(mydivid).style.backgroundImage = "url(Images/initial.png)"; 
alert("mouseup"); 
    }); 

私は同じdiv要素に1つの以上のイベントをバインドする場合、最初のEventHandler作品や他の人が無視されることを観察している...どのように私はすべてのイベントが処理されることを保証するのですか？

Answer 1

アラートを取り除く必要があります。それが問題の原因です。

私が気づいたもう一つのことは、 '#mydivid'が引用符で囲まれていないことです。

また、jquery 1.7+を使用している場合は、 'bind'ではなく 'on'を使用することをお勧めします。

jQuery 1.7以降では、.on（）メソッドは、ドキュメントにイベントハンドラを添付するための好ましいメソッドです。以前のバージョンでは、 .bind（）メソッドを使用して、イベントハンドラを 要素に直接取り付けることができます。

出典：http://api.jquery.com/bind/

jQueryのは、要素のCSSプロパティを変更する方法があります。多分、あなたはバックグラウンドを変更するためにそれを考慮することもできます。

---

http://api.jquery.com/css/

しかし、私が言ったように、アラートを削除し、それがうまく動作するはずです。この例を参照してください：

http://jsfiddle.net/fS9Ct/1/