Javascript 在事件处理程序不工作的情况下

我试图在单击列表项时运行一些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>

选择一个产品类别


...

选择机器类型

它应该能工作

使用测试代码

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

看这把小提琴

我怀疑你的get失败了

它应该能工作

使用测试代码

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

看这把小提琴

我怀疑您的get失败了

您的代码工作“正常”，问题应该是事件正在传播到它的父级

这就解决了它：

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

，还要检查url2是否正在获取您真正想要的url（如果正确），并且您可能希望使用post而不是get，因为get为了提高性能使用了“web缓存信息”

您的代码工作“正常”，问题应该是事件正在传播到其父级

这就解决了它：

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

---

，还要检查url2是否正在获取您真正想要的url（如果它是正确的），并且您可能希望使用post而不是get，因为提高性能的get使用“web缓存信息”

Try just

$（文档）

是

$（文档）中定义的单击处理程序。ready（function（）{}）

？只需尝试

$（document）

是在

$（document）.ready（function（）{}）中定义的单击处理程序？请解释您是如何解决您的问题的，以帮助社区中未来可能面临此问题的其他人。您的活动正在向其家长进行。如果这不是预期的行为，您可以使用。请解释您是如何解决您的问题的，以帮助社区中可能在未来面临此问题的其他人您的事件正在向其家长反映。如果这不是预期的行为，则可以使用。