0

jQueryモバイルを使用して、次のような単純なチェックボックスにクリックイベントハンドラーを登録しようとしています:

<input type="checkbox" name="cb" id="cb" />
<label for="cb">I am a checkbox</label>

jQuery を使用してクリック イベント ハンドラーを追加すると、次のように機能します。

$("#cb").bind("click", function(){...});

従来の DOM メソッドを使用して追加されたイベント ハンドラーは呼び出されません。

document.getElementById("cb").addEventListener("click", function(){...});

大きな疑問はなぜですか？何か案は？

ps "pageinit" と "pagebeforeshow" のイベント ハンドラーにも同様の問題があり、"bind" を介して追加されたときに受け取ることができます。これらのイベントは DOM イベントとして発生しませんか?

[編集]

完全なテストケースは次のとおりです ( jsfiddle へのリンク)。

<!DOCTYPE html> 
<html> 
    <head>
    <meta charset="utf-8">
    <title>My Page</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#cb").bind("click", function(){alert("Clicked by jquery")});
            document.getElementById("cb").addEventListener("click", function(){alert("Clicked by DOM")});
        });
    </script>
</head> 
<body> 

<div data-role="page">
    <input type="checkbox" name="cb" id="cb" />
    <label for="cb">I am a checkbox</label>
</div>

</body>
</html>

[編集2]

私自身の質問に答える:おそらくチェックボックスの上にラベルが表示されているため、jquery モバイル css ファイルを使用しているときにクリックが行われないようです。CSS を使用しなくても、すべてが期待どおりに機能します。

[編集 3]

私自身の 2 番目の質問に答えます。addEventListener を介して「pageinit」やその他のカスタム イベントをキャッチできないのはなぜですか。これはjQuery のバグです。

4

1 に答える 1

0

私の知る限り、 addEventListener は2つだけではなく3つのパラメーターを取ります。

/**
* in DHTML
* @param {String} type
* @param {Function} listener
* @param {Boolean} [useCapture]
*/
window.addEventListener = function(type,listener,useCapture) {};

または

/**
* in DOMEvents
* @param {String} type
* @param {EventListener|Function} listener
* @param {Boolean} [useCapture]
*/
EventTarget.prototype.addEventListener = function(type,listener,useCapture) {};
于 2012-08-07T00:30:30.437 に答える