Event Delegation not working on dynamic li

Question

I have my li, it has the option for editing the name. But each time I add a new element dynamically, I can't not change the name. The action for changing the name is not fire.

Having my code this way. I read on the jquery documentation about event delegation I thought this was the best way for solving this issue, But I'm implementing it the wrong way. Any idea how it's?

This is a demo of what I have: http://jsfiddle.net/DiegoTc/vK588/10/

<li id="cZero" class="active">
 <a href="#tab_preview" data-toggle="pill">
  <span  class="display edit_text">Preview Card</span>
   <input type="text" class="edit" style="display:none"/>
 </a>
</li>

$(".edit_text").on('dblclick', function(event){
    event.preventDefault(event);
    $(this).hide().siblings(".edit").show().val($(this).text()).focus();
});

$(".edit").focusout(function(){
    $(this).hide().siblings(".display").show().text($(this).val());
});

It probably doesn't work because you are not using event delegation. Read the article again (the code you wrote looks like exactly like the example annotated with `// attach a directly bound event`, not the one with `// attach a delegated event`). — Felix Kling, Jul 06 '14 at 23:41

score 1 · Answer 1 · answered Jul 06 '14 at 23:43

You are misunderstanding how to use on() for delegation. The first selector ( before on()) must exist when the code runs. You use another argument to pass in the target selector.

Try

$(document).on('dblclick','.edit_text',function(event){
    event.preventDefault(event);
    $(this).hide().siblings(".edit").show().val($(this).text()).focus();
});

Read the docs more thoroughly as there are 2 use cases for on()

Event Delegation not working on dynamic li

1 Answers1