Load script after Ajax call not work

Question

I have an ajax call:

$('#opt').change(function() {
  var option = $("#cdc").val();
  $.ajax({
    type: "POST",
    url: "orari_pause/select_spaccato.php",
    data: 'option=' + option,
    success: function(whatigot) {
      $('#spaccato').html(whatigot);
    }, //END OF SUCCESS
    complete: function() {
      $.getScript("orari_pause/script_opener.js", function() {
      });
    } //END OF COMPLETE
  }); 
});

script_opener.js

$(function() {
  $( "#dialog" ).dialog({
    autoOpen: false,
    title: 'Dettaglio sessioni',
    height: 600,
    width:800,
    modal:true,
    resizable: false
  });

  $( ".opener" ).click(function() {
    var id = $(this).attr('id');
    $( "#dialog" ).load( "orari_pause/dettaglio_sessioni.php?id="+id );
    $( "#dialog" ).dialog( "open" );
    $('.ui-widget-overlay').css('background', 'silver');
  });

  $( "#dialog2" ).dialog({
    autoOpen: false,
    title: 'Inserimento sessione',
    height: 380,
    width:300,
    modal:true,
    resizable: false
  });

  $( ".opener_session" ).click(function() {
    var id = $(this).attr('id');
    $( "#dialog2" ).load( "orari_pause/form_nuova_sessione.php?id="+id );
    $( "#dialog2" ).dialog( "open" );
    $('.ui-widget-overlay').css('background', 'silver');
  });
});

In select_spaccato.php I have a button with class opener_session. When I click on it, the event doesn't fire (but the script is loaded correctly). I think is a problem with DOM... I also try to search into Stackoverflow forum with no results.

Can you help me?

EDIT I try to load the JavaScript code inside whatigot variable, same results. The JS code is loaded, but the events not work.

Are you sure to send your option data correctly? I think you should use var option= $(this).val(); add to question HTML structures so that I could reflect your problem at home — rad11
– rad11, Commented Jul 28, 2016 at 7:17
Yes, the page returns correctly. The opener_session elements in it, on click, not fires event (script_opener.js, in "complete" function) — DearS
– DearS, Commented Jul 28, 2016 at 7:19
you can use $.when . you can refer css-tricks.com/… or try loading script in sucess function itself — Janani Kumar
– Janani Kumar, Commented Jul 28, 2016 at 7:20
Does the other click handler work, the one on the ".opener" element(s)? — nnnnnn
– nnnnnn, Commented Jul 28, 2016 at 7:23

madalinivascu · Accepted Answer · 2016-07-28 07:21:55Z

1

Use event delegation

$('body').on('click',".opener",function() {

$('body').on('click',".opener_session",function() {

answered Jul 28, 2016 at 7:21

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nnnnnn Over a year ago

Why would that be necessary? The element in question is added dynamically, but the script that calls .click() is run after that, isn't it?

madalinivascu Over a year ago

a better question is why load another js file when you can paste the content of that file in the success/complete function?

Collectives™ on Stack Overflow

Load script after Ajax call not work

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related