0

I have in my page several dropdowns that will be dynamically updated using AJAX, in this way:

    $.ajax({
        data: parametros,
        url: 'getList.php',
        type: 'POST',
        success:  function (response) {
          element.html(response);
          }

The dropdowns have names in this format:

<select id="elemento_1" class="dropdowns">
<select id="elemento_2" class="dropdowns">
<select id="elemento_3" class="dropdowns">

The PHP responds with a string response in the form <option value=1>Bla<option value=45>Ble … and it gets appended to the dropdown. You get the idea.

Initially there's only one dropdown, but whenever the user clicks a button, a new dropdown will be added and loaded using the method above, and I want it to have by default the same value than the previous dropdown. After reading this answer about how to trigger html() events:

https://stackoverflow.com/a/3616565/470994

I changed the code above to the following:

    $.ajax({
        data: parametros,
        url: 'getList.php',
        type: 'POST',
        success:  function (response) {
          element.html(response).triggerHandler("cambia");
          }

  $(".dropdowns").unbind().bind("cambia", function() {
      var nombre=this.id;
      var numero=parseInt(nombre.slice(-1));
      alert("Mooooo " + numero);
      if (numero > 1) {
        var anterior = $("#elemento_" + (numero - 1)).val();
        this.find("option[value='" + anterior + "']").prop("selected", "selected").change();
        }
});

Which inspects the dropdown in question and, if it's not the first one, will get the value of the previous dropdown and load it in the current one.

Now, this is all fine and well… except that, in my tests, the event only gets triggered when the first dropdown is loaded (the alert("Moooo") only appears in the first dropdown). If I press the button, the 2nd, 3rd… dropdowns appear, but the event isn't triggered. I suspect that it's because of the explanation here:

https://stackoverflow.com/a/6173263/470994

(bind only works for the elements that exist initially, not the ones added later).

The suggested solution is to use on()… but I don't know exactly how to use it to capture custom events like the one I've defined for html() changes. Can you even do that? Is there any other solution?

Thanks.

Community
  • 1
  • 1
PaulJ
  • 1,646
  • 5
  • 33
  • 52
  • _“but I don't know exactly how to use it to capture custom events”_ – the same way as with _any other_ event, by providing the event name? – CBroe Mar 15 '15 at 12:57
  • I just tried that. Used: `$(".dropdowns").on("cambia", function() {` instead of `unbind().bind`, and it didn't work. – PaulJ Mar 15 '15 at 13:11
  • 1
    That is not how you use `.on` for elements that are only added to the DOM later on. Go read the jQuery docs for it, it has an explanation and examples on that. – CBroe Mar 15 '15 at 13:14
  • 1
    You should use event delegation with `$('body').on('cambia', '.dropdowns', function() {` – jcubic Mar 15 '15 at 13:56
  • Thanks to both of you. An addendum: I had to change my code so that, instead of using "triggerHandler", it just called `trigger` on the event. With that change, it works now. – PaulJ Mar 15 '15 at 19:42

0 Answers0