单击<span>标签运行JQuery javascript函数[重复]

Question

This question already has an answer here:

• Event binding on dynamically created elements? 23 answers

I create a span using PHP like this.

if ($subnetkey  == 1 ) { echo ("<span class='subnetkey'>S/N of: $subnetnum</span>&nbsp;&nbsp;");}

It works, and shows the correct data on screen. Additionally if I look at it using 'Inspect Element' its properly formatted.

<span class="subnetkey">S/N of: 780</span>

I have this script at the top of the page. I've also tried it at the bottom.

<script>    
$(document).ready(function(){
    $(".subnetkey").click(function() {
        alert("subnet click mode");
    });
});
</script>

When I click the span, nothing happens. I get no errors, and of course I don't see the alert fire.

It seems like this is a timing issue between building the page dynamically and using the page. But in case thats not it, what can I do to make the function fire?

</div>

Answer 1

JQuery Event Methods like click(), dblclick(), mouseenter() etc. work only for elements already created when DOM is rendered. For dynamically created elements you use on() method with the below syntax (see previous post):

$(staticAncestors).on(eventName, dynamicChild, function() {});

Since it is a dynamically created element your code won't work. Try:

$(document).on('click', '.subnetkey', function() {
    alert("subnet click mode");
});

jQuery is only aware of the elements in the page at the time it runs, so new elements added to the DOM are unrecognized by jQuery. To combat the problem use event delegation, bubbling events from newly added items up to a point in the DOM which was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally you should delegate to the nearest parent existing at the time of page load.