升级到jquery 1.10.2后，click事件不会触发

Question

I just upgraded from jquery 1.5.2 to 1.10.2. I changed all my .live() calls to .on(). But for some reason, one particular button is no longer working. Here's the logic:

$("#add_to_rule").on("click", function()   {            
        console.log('inside add');
        //only add if no validation errors.
        if  ( ($('#contact_details').val().length == 0) ) {
            $('#validation_error').html("There is no information to add");
            return false;
        }
        var emess = $("#validation_error").text();
        if ( emess.length == 0 )  { 
                add_routing_entry();            
                update_call_routing_tag();      
        }
    });

It never prints the "inside add" message in the console. From the console window, I've tested to make sure the element exists and returns the correct value. Here are some of the results from my tests inside the console:

$('#add_to_rule').val();
"Add to Rule"
$('#add_to_rule').on("click");
<input id=​"add_to_rule" type=​"button" class=​"submit" value=​"Add to Rule">​

I've also tried to change the value on the button as a test, from the console window like so:

$('#add_to_rule').val("test");
[
<input id=​"add_to_rule" type=​"button" class=​"submit" value=​"test">​
]

And it does update the text on my button.

Finally, for what it's worth, I've dumped out the version of the jquery library it's picking up by adding the following line:

console.log(jQuery.fn.jquery);

It prints 1.10.2.

Any suggestions on what I might be doing wrong would be appreciated. Thanks.

Answer 1

将它绑定到最接近的静态父元素，使用这样的事件委托动态添加元素：

$(document).on("click","#add_to_rule", function()   {