CODEWITHSUNDEEP
javascriptjqueryhtml
Fernandez
Fernandez

Reputation: 61

Click event doesn't fire in jquery

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'); 
        });
});

Upvotes: 2

Views: 5450

Answers (5)

Marian07
Marian07

Reputation: 2590

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.com/almanac/properties/p/pointer-events/

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

Upvotes: 0

Carlos Rodriguez
Carlos Rodriguez

Reputation: 2220

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'); 
        });
    });    
});

Upvotes: 2

Satpal
Satpal

Reputation: 133453

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

  $('div').on('click', '.x', function() {
    alert('fire');
  });
});
<script src="https://ajax.googleapis.com/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'); 
});

Upvotes: 9

Carson Ip
Carson Ip

Reputation: 1946

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
    }));
});

Upvotes: 5

Elizabeth Meyer
Elizabeth Meyer

Reputation: 11

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.com/on/

Upvotes: 1

Related Questions