CODEWITHSUNDEEP
buttonjquery
Mohan Timilsina
Mohan Timilsina

Reputation: 500

button event with jQuery

I have an id of the button element like this: '#edit-field-project-dnr-und-0-remove-button' I want to add an event in this button id for instance:

  $('#edit-field-project-dnr-und-0-remove-button').click(function (){
          calculateDonorSum();               
       });

This button is ajax button whenever this is clicked old id that is '#edit-field-project-dnr-und-0-remove-button' is replaced into '#edit-field-project-dnr-und-1-remove-button' and so on but no event is fired in the previous button id. Is there any way to fix this ?

Upvotes: 1

Views: 126

Answers (5)

Tion
Tion

Reputation: 1490

consider using jQueries attribute starts with, contains, or ends with selectors

//button id starts with 'edit-field-project-dnr-und-' and ends with '-remove-button'
$("[id^=edit-field-project-dnr-und-][id$=-remove-button]").click(function () {
    calculateDonorSum();
});

if these buttons are created dynamically, use 

$('#some-parent-container').on("click","[id^=edit-field-project-dnr-und-][id$=-remove-button]", function(){
   calculateDonorSum();
})

instead of .click()

//button id starts with
$("[id^=button-]").click(function () {
    calculateDonorSum();
});

//button id ends with
$("[id$=-remove]").click(function () {
    calculateDonorSum();
});


//button id contains
$("[id*=-remove]").click(function () {
    calculateDonorSum();
});

this works, here, made a fiddle http://jsfiddle.net/MzPEg/1/

in general use this approach ONLY if you don't have control over the naming/creation of the original buttons. these selectors are not as fast as $('#id') and it's a bit sloppy. but it will work in a pinch.

Upvotes: 1

daleyjem
daleyjem

Reputation: 2674

Using an advanced selector that matches the beginning part of the id AND the ending part:

$('[id^="edit-field-project-dnr-und"][id$="remove-button"]').on('click', function(){...});

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can do as this:

$('#edit-field-project-dnr-und-0-remove-button').click(function (e){
e.preventDefault();          
calculateDonorSum(); 
$(this).attr('id','edit-field-project-dnr-und-1-remove-button');             
       });

Upvotes: 0

jfriend00
jfriend00

Reputation: 707366

When you do this:

$('#edit-field-project-dnr-und-0-remove-button').click(function (){
    calculateDonorSum();               
});

This searches the current DOM for any element that has an id="edit-field-project-dnr-und-0-remove-button" and attaches an event handler directly to that DOM element.

If you remove that DOM element and create some new DOM element or add a new DOM element, that new DOM element will NOT have this event handler attached to it unless you run some new code to attach an event handler to the new element.

For dynamic elements, it is also possible to use delegated event handling, but you haven't really described enough of what you're doing for us to know how to recommend that. I can't tell if you're adding a new button or changing the ID on the current button.

If you are adding a new button and want all new buttons of this type to have this event handler, then you can use delegated event handling. Delegated event handling works like this:

$("some static common parent selector").on("click", "some common child selector", fn);

So, if your buttons were all in a id="container" div and all had a common class name on them class="calcButton", then you could use:

$("#container").on("click", ".calcButton", function() {
    calculateDonorSum();
});

And, all buttons in the container with that class would have this event handler, even if they are dynamically created after the event handler is defined.

Some other references on delegated event handling:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

Should all jquery events be bound to $(document)?

JQuery Event Handlers - What's the "Best" method

Upvotes: 0

corkin
corkin

Reputation: 81

It appears that the id of the field on which the onclick event is supposed to occur is changing, yet you only handle the first id. If you do not want to make all of these ids the same, you could put the click event handler on a parent wrapper div.

Upvotes: 0

Related Questions