I appended a new element but when I click on it it has no response.

HTML

<button>add element</button>
<div></div>

Javascript

$(function(){
    $('button').click(function(){
        $('div').append('<span class="x">x</span>');
    });

    $('.x').click(function(){
        alert('fire'); 
        });
});

I appended a new element but when I click on it it has no response.

HTML

<button>add element</button>
<div></div>

Javascript

$(function(){
    $('button').click(function(){
        $('div').append('<span class="x">x</span>');
    });

    $('.x').click(function(){
        alert('fire'); 
        });
});

• javascript
• jquery
• html

5 Answers 5

$(function() {
  $('button').click(function() {
    $('div').append('<span class="x">x</span>');
  });

  $('div').on('click', '.x', function() {
    alert('fire');
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>add element</button>
<div></div>

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the event binding call.

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

As you are creating elements.

You need to use Event Delegation. You have to use .on() using delegated-events approach.

General Syntax

$(document).on(event, selector, eventHandler);

Ideally you should replace document with closest static container.

Example

$('div').on('click', '.x', function(){
    alert('fire'); 
});

One cannot bind click events to dynamically generated elements through calling $(".x") when the element does not exist in the document. One of the solution is to use Event Delegation, which is something like

$(document).on("click",".x",function(){
// do your work here
})

And the other way to do that is do bind the click event to the element when it is generated

$('button').click(function(){
    $('div').append($("<span>",{
          class: x
    }).text("x").click(function(){
          // do your work here
    }));
});

You're adding the event listener before the item with the x class exists. You want to add that event listener right after you append that span.

$(function(){
    $('button').click(function(){
        $('div').append('<span class="x">x</span>');
        $('.x').click(function(){
            alert('fire'); 
        });
    });    
});

You can not bind events directly to dynamically created elements in jQuery.

Use event-delegation to bind to the dynamically created element's parent:

$(function(){
    $('button').click(function(){
        $('div').append('<span class="x">x</span>');
    });

    $('button').on("click", ".x", (function(){
        alert('fire'); 
        });
});

For more information on this, see: http://api.jquery./on/

I had another issue why the event was not fired.

In my case it was beause of CSS pointer-events was set to none

https://css-tricks./almanac/properties/p/pointer-events/

https://developer.mozilla/en-US/docs/Web/CSS/pointer-events