0

This has been flagged as a duplicate but to clarify once my drop down appears I do not want to run any more jquery click function on it. I simply wish to select the drop down available by select I mean select it as you would a regular drop down.

I'm currently adding some li elements from some dynamic data like so.

$(document).ready(function() {

      $('#size li').click(function() {

            if ($(this).text() != '') {
              // var select = $(".dynamic li").closest("ul").prop("id");
              // var value = $(this).text();
              // var dependent = $(this).closest('ul').data('dependent');
              // var _token = $('input[name="_token"]').val();
              var productId = $(this).attr("value");

              // here we'll make ajax call to post details of dropdown and get new data
              $.ajax({
                    url: "{{ url('product_details/fetch/productId') }}".replace("productId", productId),
                    dataType: "json",
                    success: function(result) {
                        // clear the drop downs so no data will be there
                        $("ul[data-dependent='quantity']").empty();

                        // add quantity drop down based on selected size
                        $.each(result.productQuanties, function(i, item) {
                          $("ul[data-dependent='quantity']").append("<li value=" + item.quantity_name + "><span>" + item.quantity_name + "</span></li>");
                        })

This appends to an empty drop down ul and the html code viewable in the dom is this:

<li value="25"><span>25</span></li>
<li value="50"><span>50</span></li>
<li value="100"><span>100</span></li>
etc.

This appears as a drop down on my web page. However when I go to select the li nothing happens. By nothing happens I mean the drop down just appears as it did before I clicked anything. The data is still there but it is not showing as selected.

The expected result would be for me to just click on it and it remained clicked.

FabricioG
  • 2,204
  • 1
  • 21
  • 44
  • What kind of dropdown? Are you using some sort of plugin? If you are using a plugin to transform this list into a dropdown, you will most likely have to reinitialize it after you change the html it originally initialized against. – Taplar Aug 17 '18 at 22:12
  • what does your click event listener look like? – dysfunc Aug 17 '18 at 22:13
  • @dysfunc I just added the code with the event listener. – FabricioG Aug 17 '18 at 22:17
  • @Taplar it's just regular css for the drop down. – FabricioG Aug 17 '18 at 22:19
  • @Barmar This question is different. Specifically here we have an ajax success and the other question is just on binding in general to a click element. – FabricioG Aug 17 '18 at 23:10
  • It doesn't matter how the elements are added, the same delegation solution works. – Barmar Aug 17 '18 at 23:12
  • @Barmar but I'm not trying to bind to a dynamically created element. The element is there I just want to select it. – FabricioG Aug 17 '18 at 23:14
  • The last sentence on https://stackoverflow.com/help/duplicates says "If you see a question and do not agree that it truly is a duplicate, **edit it to highlight the differences**" (emphasis in original). – Heretic Monkey Aug 17 '18 at 23:16
  • @FabricioG The question says "I'm currently adding some li elements from some dynamic data like so." Are those not the elements that you're trying to select with the `.click()` handler? – Barmar Aug 17 '18 at 23:16
  • @Barmar no sir those elements are appearing in the drop down and I'm simply trying to select as in when you select from a drop down the item selected is displayed. No more on click handler on it. – FabricioG Aug 17 '18 at 23:17
  • A dropdown is created with ` – Barmar Aug 17 '18 at 23:19

0 Answers0