Web Develop Wolf Web Develop Wolf - 6 months ago 11
jQuery Question

On Event Handler Not Working

I'm attempting to run some JQuery when clicking on a List Item but the click event does not seem to fire when checking in debugger.

The Script is:

$(document.body).on('click', '.range', function (event) {
var rangeid = $(this).data('value');
var url2 = '/Home/GetMachineTypeByRange/-1';
url2 = url2.replace("-1", rangeid);

$.get(url2, function (data) {
$('#MachineTypeDropDown').html(data);
$('#MachineTypeDropDown').toggle();
});
});


And my HTML is:

<div class="button-group">
<button type="button" class="btn btn-default dropdown-toggle col-md-12" data-toggle="dropdown">Select a product category <span class="caret"></span></button>
<ul id="RangeDropDown" class="dropdown-menu col-md-12" data-url="/Home/GetRangeForCorp">
<li class="range" data-value="1"><a href="#" class="range" data-value="1" tabindex="-1">Articulated Dump Trucks</a></li>
...
</ul>
</div>

<div class="button-group" style="display: none;">
<button type="button" class="btn btn-default dropdown-toggle col-md-12" data-toggle="dropdown">Select a machine type <span class="caret"></span></button>
<ul style="display: none;" id="MachineTypeDropDown" class="dropdown-menu col-md-12"></ul>
</div>

Answer

it should work

with test code

$(document.body).on('click', '.range', function (event) {
            alert("test");
        });

look at this fiddle https://jsfiddle.net/d15czyt3/

i suspect your get is failing

Comments