0

I created rows of table Dynamically by jquery, I also add a remove button on each row,and add an event on this button by which the row corresponding to that button(in a row) is removed when we click on that button,But my broblem is only upper three buttons are active and fired,and the buttons which are at last are not able to work.

$(function(){ 
    $('<input></input>')
        .attr({'type': 'button'})
        .val("Remove")
        .appendTo('table#AllSelectedTest tbody tr:first td:last')
    ; 
});

$(document).ready(function() { 
    $("table#AllSelectedTest tbody tr input").live({
        click: function(){
            $(this).closest('tr').remove(); 
        }
    })
});

I uses The above code For Generating a button and bind it with the events. My Problem is some button works and some are not

2
  • 1
    Moreover, it would be helpful if you could give your old code.
    – scessor
    Jan 25, 2012 at 8:14
  • I edited my question and add my code
    – Vishwajeet
    Jan 25, 2012 at 8:37

2 Answers 2

2

its always good to give an id to element. try changing the code as below

$(document).ready(function(){   
   $('<input>').attr({type: 'button', id:"remove_button", value:'Remove'})
                     .appendTo('table#AllSelectedTest tbody tr:first td:last');

   $("#remove_button").live("click", function(){
                         $(this).closest('tr').remove();
        });
});

fiddle example : http://jsfiddle.net/vSUYj/1/

also if you are using jquery above 1.7, please make use on instead of live.

update: try this as well, in case above not working

 $(document).ready(function(){   
       var elem = $('table#AllSelectedTest tbody tr:first td:last');
       elem.append('<input type="button" id="remove_button" value="Remove"/>');

     $("#remove_button").live("click", function(){
         $(this).closest('tr').remove();
     });
 });

fiddle example : http://jsfiddle.net/vSUYj/

6
  • i use this function also,But still now only top four buttons are active,and the buttons which are below 4th position are not working
    – Vishwajeet
    Jan 25, 2012 at 9:33
  • <input id="remove_button" type="button" value="Remove" ,=""> in html code it looks like that
    – Vishwajeet
    Jan 25, 2012 at 10:09
  • actually its not correct format.. try the new answer i have updated in answer Jan 25, 2012 at 10:13
  • By the way i correct it ,but still only top 4 buttons works rest of them i think is disabled
    – Vishwajeet
    Jan 25, 2012 at 10:15
  • 1
    shit man.. there was an extra "}". i have updated the answer, its working fine.. check the fiddle example. both the above answers are working properly. Jan 25, 2012 at 11:24
1

Without seeing your code, it's impossible to say for certain, but are you using .live() or .delegate() to assign the handlers for those buttons?

edit: should also be noted that those methods are deprecated in the latest version of jquery, and the new method is .on()

1
  • I tried your solution But still now only top four buttons are active,and the buttons which are below 4th position are not working, this is the strange thing for me,I dont know what happens here
    – Vishwajeet
    Jan 25, 2012 at 9:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.