jQuery-添加的类没有使用click函数响应

Question

Best,

Can someone help me to find out, how an element with an added class can operate like a element which had the class from in the beginning? --> ($(document).ready(...)) . I think that the class isn't added to click event, but have no idea how to solve...

<script type="text/javascript">
  $(document).ready(function() {
     ...
      $('span.del').click(function() {
        var id = $(this).parent().attr('id')
        $("#"+id).remove()
        var input_values  = new Array();
        input_values [0]= id;
        load_page("change","taskMenu2.php",input_values,'del')
            })
     ...
  })
</script>

-

<ul>
    <li id="1" ><span class="del"></span> old </li>
    <li id="2" ><span class="del"></span> old </li>
    <li id="3" ><span class="del"></span> old </li>
    <li id="4" > NEED A DEL SPAN </li>
</ul>

Now : I want to add the span with class "del" to li with the ID 4 . When i click on it (the span), it should execute the function above like the other ones.

<script type="text/javascript">
   ...
   $("#4").prepend('<span class="del"></span>'); 
   ...
</script>

(jquery 2.1.0 min is used)

Hoping for a solution

Kind regards

Answer 1

You can try the .on() function on a container element.

For example, in this case, something like this:

$("ul").on("click", ".del", function() { // Your code });

Answer 2

You need to use event delegation here since your span has been dynamically created:

$(document).ready(function() {
    $('#4').on('click', 'span.del', function() {
        var id = $(this).parent().attr('id')
        $("#"+id).remove()
        var input_values  = new Array();
        input_values [0]= id;
        load_page("change","taskMenu2.php",input_values,'del')
    });
})

Also, a side note for the id of your list items here. From the HTML 4 specification :

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML 5 specification is even more permissive, saying only that:

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

So for a valid HTML markup, you can change <li id="1" > , <li id="2" > .... to something else such as <li id="li1" > , <li id="li2" >...

Answer 3

.click() event will not bind event to dynamic html elements. You should use .on() for binding event for dynamic html elements:

$('ul').on('click', 'span.del', function() {
    // YOUR CODE HERE
});