Question

我在无序列表中有多个列表项。每个列表项都如下所示：

<li class="something" onclick="function(somePHPparameter)">somePHPparameter</li>

如果这很重要，该函数将通过ajax填充当前为空的div。我想要它，以便默认情况下，当页面首次完成加载时，单击li将填充div。如果再次单击相同的li，则它将清空div。如果单击另一个li，只需使用不同的“somePHPparameter”更改内容。我目前的实现是这样的：

$('.continent').click(function(){
    if ($(this).hasClass('select')){
        $("#box").empty();
        $('.continent').removeClass('select');
    }
    else{
        $('.continent').removeClass('select');
        $(this).addClass('select');
    }
});

一，我的代码是否有任何错误的逻辑？有什么额外的吗？二，实际问题是即使删除了类，仍会出现填充div的onclick。 e.preventDefault（）和e.stopPropagation（）不起作用。有什么想法吗？

Answer 1

在这种情况下，

event.preventDefault（）和event.stopPropagation（）将无济于事，因为在触发click时已经调用了两个不同的函数。一个函数称为内联，另一个函数使用jQuery调用。

要避免这种情况，请从onclick中删除<li>属性，并在jquery点击处理程序中调用该函数。

如果它是PHP生成的参数，请将其作为rel属性添加到<li>并在jquery处理程序中使用，如下所示：

<li class="something" rel="somePHPparameter">somePHPparameter</li>

-

$('.continent').click(function(){
if ($(this).hasClass('select')){
    $("#box").empty();
    $('.continent').removeClass('select');
}
else{
    $('.continent').removeClass('select');
    $(this).addClass('select');

    var PHPparam = $(this).attr('rel');

    functionCallUsing(PHPparam);
}

return false;
});

只是一个粗略的想法。

Answer 2

你可以简单地做

$('.continent').click(function(){
    if ($(this).hasClass('select')){
        $("#box").empty();
        $('.continent').removeClass('select');
    }
    else{
        $('.continent').removeClass('select');
        $(this).addClass('select');
    }

    return false;
});

Jquery .click防止默认onClick

2 个答案: