Click Handler doesn't work After Jquery POST

Question

I have a web page with a Select option and FORM, When a user changes selection, My jquery script function will dynamically do ajax POST to replace original form with different form (new form elements).

But i noticed that Click handler ($(button).click() Event) is not working on the newly generated form. Please assist on this.

Is this a known problem in Jquery ??.

<select id=choice><option>....</select>
<div class=mytable>
<form id='dataform-10'>
.....
<button id="edit-10"></button>
</form>
<div>
<script>
  $(function(){
  $("#choice").change(function(){
    $.get('/portal/go?id='+this.value, function(data, status){ 
            //$(".mytable").hide();
            $(".mytable").html(data);
            $(".mytable").show();
          });
  });
});
</script>
<script>
$('[id^=edit]').on("click",function(e) {
    e.preventDefault();
   var num = this.id.slice(5);   
   var fdata = $('#dataform-'+num).serialize();
   $.post('/portal/update', fdata, function(data, status){ 
            alert(data);
          });
});
</script>

Check this answer - https://stackoverflow.com/a/6658774/2182949 — Goran Stoyanov, Oct 26 '19 at 16:11
You haven't added any code. Edit your question with _the relevant code_ only as a [mcve]. — Andy, Oct 26 '19 at 16:11
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Oct 26 '19 at 17:56
You're rebuilding mytable, so the `[id^=edit]` buttons that had the event attached no longer exist. You need to see event delegation. See the duplicate. — freedomn-m, Oct 26 '19 at 17:57

Arpit Bansal · Accepted Answer · 2019-10-27T08:37:31.030

1

As has been pointed out by @sh977218 the reason why the click event does not work is the addition of new elements in DOM after the initial tagging of event handlers. Try something like this:

<script>
function clickEventHandler(event) {
  // code for click event 
   event.preventDefault();
   var num = event.target.id.slice(5);   
   var fdata = $('#dataform-'+num).serialize();
   $.post('/portal/update', fdata, function(data, status){ 
        alert(data);
      });
}
$('[id^=edit]').on("click", function(e){clickEventHandler(e);});
$("#choice").change(function(){
  $.get('/portal/go?id='+this.value, function(data, status){ 
        //$(".mytable").hide();
        $(".mytable").html(data);
        $(".mytable").show();
        $('[id^=edit]').on("click", function(e){clickEventHandler(e);});
      });
});
</script>

edited Oct 27 '19 at 08:37

answered Oct 26 '19 at 17:58

Arpit Bansal

493
1
4
15

Not working. My JSfiddle here https://jsfiddle.net/tLerb2n6/ , Try to click on Second button pls. – serverliving.com Oct 27 '19 at 07:48
You are still not using a named function try this https://jsfiddle.net/4eq5c81s/ – Arpit Bansal Oct 27 '19 at 08:11
I got the event to catch now, But unfortunately this line var num = this.id.slice(5); is not working. Error is Cannot read property 'slice' of undefined – serverliving.com Oct 27 '19 at 08:32
try using event.target.id instead – Arpit Bansal Oct 27 '19 at 08:34

score 0 · Answer 2 · answered Oct 26 '19 at 16:14

0

When your add some new DOM, you need to hook the event on it again.

answered Oct 26 '19 at 16:14

Peter Huang

972
4
12
34

Goran Stoyanov · Answer 3 · 2019-10-27T15:23:57.323

0

... $('[id^=edit]').on("click",function(e) { ...

should be

... $(".mytable").on("click", "[id^=edit]", function(e) { ...

Have you tried like this?

edited Oct 27 '19 at 15:23

answered Oct 26 '19 at 16:29

Goran Stoyanov

2,311
1
21
31

Tried that No luck, Instead of catching Click event, form redirects me – serverliving.com Oct 26 '19 at 16:42
Are you sure you have the `e` parameter in the handler function and the `e.preventDefault();` afterwards? – Goran Stoyanov Oct 26 '19 at 16:47
Yes I have ,function(e) { e.preventDefault(); – serverliving.com Oct 26 '19 at 16:48
Hm.. can't really help without a playground example. Would it be possible for you to create a [fiddle](http://jsfiddle.net) which illustrates the problem? – Goran Stoyanov Oct 26 '19 at 16:52
1

This won't work because `.mytable` is not a *child* of `[id^=edit]`. Maybe swap them around? (or just use `$(document).on("click", "[id^=edit]", function...`) – freedomn-m Oct 26 '19 at 17:55
@freedomn-m sure, my bad, thanks for pointing this out. I've edited my answer. – Goran Stoyanov Oct 27 '19 at 15:24

Click Handler doesn't work After Jquery POST

3 Answers3