jQuery Ajax multi selector

Question

I have a dropdown list that populates a list using ajax

<select name="ProductSizeType_field" id="ProductSizeType_field">
 <option value="-1">Please Select...</option>
 <option value="NotRequired">Not Required</option>
 <option value="Circumference">Circumference</option>
 <option value="ShoeSize">ShoeSize</option>
 <option selected="" value="WaistSize">WaistSize</option>
 <option value="ShirtSize">ShirtSize</option>
</select>

This runs a piece of ajax to populate a list for the person to multi select sizes

$('#ProductSizeType_field').on('change', function (e) {
    var select_id = $(this).val();
    var compare_id = "<?php echo $ProductSizeType; ?>";

    var dataString = 'AjaxCall=ProductSize&compare_id='+compare_id+'&select_id='+select_id;

    jQuery.ajax({
        type: "POST",
        url: "/product.editor.ajax.php",
        data: dataString,
        beforeSend: function(){ 
        },
        complete: function(){ 
            jQuery("Show_ProductSize").show();
        },
        success: function(response){
            jQuery("#ProductSizeSelect_1 ul").append(response);
        }
    });
});

This brings back a set of results.

<div id="ProductSizeSelect_1" class="MultiSelect">
    <ul class="ClearFix">
        <li id="6">
            <div title="UK1">UK1</div>
            <input type="hidden" name="ProductSize_field[]" id="ProductSize6_field" value="">
        </li>
        <li id="7">
            <div title="UK2">UK2</div>
            <input type="hidden" name="ProductSize_field[]" id="ProductSize7_field" value="">
        </li>
        <li id="8">
            <div title="UK3">UK3</div>
            <input type="hidden" name="ProductSize_field[]" id="ProductSize8_field" value="">
        </li>
    </ul>
</div>

I have also created a jQuery function to allow me to click the sizes and checn click they highlight and also place the ID into the hidden input field

$(function () {
    $("#ProductSizeSelect_1 li").click(function () {
        $(this).toggleClass("selected");
        var SizeID = $(this).attr("id");
        var CurrentSizeValue = $('#ProductSize'+SizeID+'_field').val();

        if(CurrentSizeValue === SizeID){
            $('#ProductSize'+SizeID+'_field').val("");
        }else{
            $('#ProductSize'+SizeID+'_field').val(SizeID);
        }
    });
});

However, none of the returned results are clickable. When i click the results returned by ajax nothing happens. If i manually add some test results to the #ProductSizeSelect_1 ul these are clickable and work as expected, its just the results return via ajax.

http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click — digital illusion, Mar 09 '17 at 12:14

score 0 · Answer 1 · answered Mar 09 '17 at 12:16

0

Your problem is that the <li> is dynamically added. You should change your click function to

$(document).on("click", "#ProductSizeSelect_1 li", function () ...

to avoid this issue. The element does not exist when jQuery is loaded, but with this it should search it in the body and find it. Had this problem a few times.

answered Mar 09 '17 at 12:16

yomisimie

381
3
15

No problem, like I said had this problem a few times until I understood. – yomisimie Mar 09 '17 at 14:07

jQuery Ajax multi selector

1 Answers1