javascript - 関数を含む html を追加する

Question

onclickHTML を追加する関数があります:

jQuery(".test").click(function() {
    jQuery(this).prevAll("input").val("5")
    jQuery(".after").append("<div><input /><a class='.test'>click doesn't work !</a></div>")
});

したがって、クラスをクリックすると.test、関数がトリガーされます。それは機能しますが、別のクラスを追加.testしました。それをクリックすると、関数はトリガーされません。なんで ？ありがとう。

フィドル: http://jsfiddle.net/csL8G/3/

Answer 1

jQuery.on()jQuery 1.7+を使用している場合は、メソッドを使用できます

//.on( events [, selector] [, data], handler(eventObject) )

$(document).on('click', '.test', function(){
   //....
});

以前のバージョンでは、.live()または.bind()メソッドを使用できます。

Answer 2

Use this to check for dynamically added .test elements:

jQuery("body").on('click', '.test', function() {
   jQuery(this).prevAll("input").val("5");
   jQuery(".after").append("<div><input /><a class='.test'>click doesn't work !</a></div>");
});

If you are using jQuery less than 1.8 then use live instead:

jQuery('.test').live('click', function() { ...

Basically the reason is because when the DOM loads then the initial click function just applies to elements already IN the document. But with the on() handler you sets a listener to check within the realm (body) which content has the test class and makes the click event work on that...

Answer 3

ねえあなたが書いたあなたのhtmlをチェックしてください：

<a class=".test"></a>

それだけである必要がありますclass="test"

jQuery("body").on('click', '.test', function() {
   jQuery(this).prevAll("input").val("5");
   jQuery(".after").append("<div><input /><a class='test'>click doesn't work !</a></div>");
});