JQuery 单击不适用于动态创建的项

Use the new jQuery on function in 1.7.1 -

http://api.jquery.com/on/

Using .click will only attach events to elements that already exist.

You need to use a function which monitors for dynamically created events - in older versions of JQuery this was .live(), but this has been superceded by .on()

Do this:

 $( '#wrapper' ).on( 'click', 'a', function () { ... });

where #wrapper is a static element in which you add the dynamic links.

So, you have a wrapper which is hard-coded into the HTML source code:

<div id="wrapper"></div>

and you fill it with dynamic content. The idea is to delegate the events to that wrapper, instead of binding handlers directly on the dynamic elements.

Btw, I recommend Backbone.js - it gives structure to this process:

var YourThing = Backbone.View.extend({


// the static wrapper (the root for event delegation)
el: $( '#wrapper' ),


// event bindings are defined here
events: {
'click a': 'anchorClicked'
},


// your DOM event handlers
anchorClicked: function () {
// handle click event
}


});


new YourThing; // initializing your thing

$("#container").delegate("span", "click", function (){
alert(11);
});

Try something like

$("#container").on('click', 'someLinkSelector', function(){ $("#container").html( <new html with new spans> ) });

You basically need to attach your events from a non-dynamic part of the DOM so it can watch for dynamically-created elements.

source: this post

if you created your elements dynamically(using javascript), then this code doesn't work. Because, .click() will attach events to elements that already exists. As you are dynamically creating your elements using javascript, it doesn't work.

For this you have to use some other functions which works on dynamically created elements. This can be done in different ways..

Earlier we have .live() function

$('selector').live('click', function()
{
//your code
});

but .live() is deprecated.This can be replaced by other functions.

Delegate():

Using delegate() function you can click on dynamically generated HTML elements.

Example:

$(document).delegate('selector', 'click', function()
{
//your code
});

EDIT: The delegate() method was deprecated in version 3.0. Use the on() method instead.

ON():

Using on() function you can click on dynamically generated HTML elements.

Example:

$(document).on('click', 'selector', function()
{
// your code
});

I faced this problem a few days ago - the solution for me was to use .bind() to bind the required function to the dynamically created link.

var catLink = $('<a href="#" id="' + i + '" class="lnkCat">' + category.category + '</a>');
catLink.bind("click", function(){
$.categories.getSubCategories(this);
});


getSubCategories : function(obj) {
//do something
}

I hope this helps.

You have to add click event to an exist element. You can not add event to dom elements dynamic created. I you want to add event to them, you should bind event to an existed element using ".on".

$('p').on('click','selector_you_dynamic_created',function(){...});

.delegate should work,too.