Question

我正在尝试在已经运行的代码中使用新的jQuery切换功能。基本上，切换功能应该通过onclick事件显示/隐藏下面的div form_fields_con。

问题是form_fields_con div包含触发的AJAX功能以及onclick事件。

切换在form_fields_con div中没有任何内容发生变化时有效，但一旦点击，切换功能就会停止工作。

这是切换功能：

$(document).ready(function() {
    $(".slidingDiv").hide();
    $(".show_hide_search").show();

    $('.show_hide_toggle').on('click', function(e) {
        e.preventDefault();

        var self = this,
        sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function() {
            $($(self).children()[0]).text(function(_, txt) {
                return txt == "–" ? "+" : "–";
            });
        });
    });
});

这是form_fields_con div中包含的AJAX：

function selectcombobox(fuelcombobox, fuelid, fuelContainer, field_name) {
    var popupvar = jQuery.noConflict();

    popupvar('#'+fuelcombobox).css('display', 'none');
    popupvar('#'+fuelid).css('display', 'block');
    popupvar('#'+fuelContainer).css('display', 'none');
}

HTML和CSS在这里发布了一个JSFiddle，以避免过长的帖子：

http://jsfiddle.net/Bradg/v8hzLt7f/1/

注意：出于某种原因，我无法模拟JSFiddle中的错误，为此道歉。

如何防止两个onclick函数发生冲突？

Answer 1

您更改/重新创建持有onClick侦听器的DOM元素，解决问题的一种简单方法是事件委派：http://api.jquery.com/on/（请参阅第二个参数）

$('.slidingDiv').on('click', '.select_con_car', function() {
    alert('clicked');
});

http://jsfiddle.net/5m2mwd9h/

两个OnClick事件重叠，导致第一个事件停止正常执行

1 个答案: