3

コードのコメントを参照してください：

$.each($('input[type="radio"]'), function(){
    var input = $(this);
    var container = $('<div class="radio"></div>');
    var mark = $('<span />');

    input.wrap(container).after(mark);

    container.click(function(){
        alert('test'); // Not triggered.
    });
});

htmlは次のとおりです。

<input type="radio" value="female" name="gender" />

クリックしたときにアラートがトリガーされない理由は誰でも知っています。そうです、CSSに表示されます。私が使用するとき：

console.log(container);

それは私にそれが含んでいるHTMLを与えます。

ありがとう

4

3 に答える 3

5 
$('body').on('click', 'div.radio', function() {

});

完全なコード

$('body').on('click', 'div.radio', function() {
  alert('test'); 
});

$.each($('input[type="radio"]'), function(){
    var input = $(this);
    var container = $('<div class="radio"></div>');
    var mark = $('<span />');

    input.wrap(container).after(mark);
});

ノート

の代わりに、のコンテナであるをbody使用する必要があります。static-elementcontainer

なぜこれが必要なのか

要素が動的にDOMに追加されるため、デリゲートイベントハンドラーが必要です。ページの読み込み後。

于 2012-06-11T17:57:12.510 に答える
1

いくつかのテストを行った後、引数として渡したオブジェクトの「ラップ」クローンを作成するか、オブジェクトへの参照が失われたように見えますが、よくわかりません。

最初の解決策は、オブジェクトを「ラップ」で移動する前に、イベント「onclick」を割り当てることです。

$.each($('input[type="radio"]'), function(){
    var input = $(this);
    var container = $('<div class="radio"></div>');
    var mark = $('<span />');

    $(container).click(function(){
        alert('test'); // triggered now.
    });

    input.wrap(container).after(mark);
});

簡略化されたバージョン：

$.each($('input[type="radio"]'), function(){

    var wrapper = $('<div class="radio"></div>').click(function(){
        alert('test'); // triggered now.
    });

     $(this).wrap(wrapper).after($('<span />'));
});

onload関数でこの関数をdecalareすることを忘れないでください

$(function(){

   // your code here ....
});
于 2012-06-11T18:43:25.193 に答える
0

私もこれに影響を受け、onはjquery1.7以降でのみ使用可能であることがわかりました。私はjquery1.4.1を使用していますが、バージョンでは使用できません。jqueryのアップグレードは避けたかったものでした。

ありがたいことに、代理人がそこにいて、それは問題を解決しました。

于 2012-11-04T15:37:05.307 に答える