在事件处理程序不工作

时间:2016-05-19 15:06:59

标签: javascript jquery

我在单击List Item时尝试运行一些JQuery,但是在检入调试器时似乎没有触发click事件。

脚本是:

$(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();
            });
        });

我的HTML是:

    <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>

2 个答案:

答案 0 :(得分:0)

它应该有用

带有测试代码

$(document.body).on('click', '.range', function (event) {
            alert("test");
        });
看看这个小提琴 https://jsfiddle.net/d15czyt3/

我怀疑你的失败

答案 1 :(得分:0)

你的代码工作“很好”,问题应该是事件传播给它的父母......

这解决了它:

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

        console.log(url2 + " | " +rangeid);
        $.get(url2, function (data) {
            $('#MachineTypeDropDown').html(data);
            $('#MachineTypeDropDown').toggle();
        });
    });

event.stopPropagation() ,请检查url2是否正在获取您真正想要的网址(如果正确)并且您可能希望使用post而不是get,因为获得提高性能使用“网络缓存信息”