Question

我有这段代码：

<ul>
    <li class="foo" onclick="alert('Hello')">a</li>   
    <li class="foo" onclick="alert('Hello')">b</li>
    <li class="foo" onclick="alert('Hello')">c</li>
</ul>

我想在alert()点击文字“a”时阻止默认操作<li>，并使用此代码：

$(document).on('click','.foo', function(){
    if ($(this).text()=='a')
        return false;
});

但这不起作用：http://jsfiddle.net/Trk6W/10/

是否有解决方案仅修改javascript ？

更新：我不想删除属性onclick，因为li的值可以更改

Answer 1

这里的问题是jQuery代码在onclick属性之后运行。所以没有办法让它与你目前的设置方式一致。解决方案是查找onclick元素并将其移动到另一个事件，并使用动态触发的onclick而不是事件。

$(".foo").each( function() {
   this._onclick = this.onclick;
   this.onclick = null;
});


$(document).on('click','.foo', function(){
    if ($(this).text()!=='a') {
        this._onclick.apply(this,arguments);
    }
});

JSFiddle

此方法的问题是，如果动态添加内容，则必须调用转换单击的代码。

Answer 2

除了唯一的ID警告，只需删除onclick attr：

<强>标记：

<ul>
  <li class="foo" onclick="alert('Hello')">a</li>   
  <li class="foo" onclick="alert('Hello')">b</li>
  <li class="foo" onclick="alert('Hello')">c</li>
</ul>

<强> JS：

$('.foo').map(function(){ 
  if($(this).text() == 'a')
    $(this).removeAttr('onclick')
});

Answer 3

您可以为重复的元素设置class，并使用以下代码段：

<ul>
    <li class="foo">a</li>
    <li class="foo">b</li>
    <li class="foo">c</li>
</ul>
<script>
    $('.foo').on('click',function(){
        if($(this).text() === 'a'){
            return false;
        }
        // Whatever you want here.
    });
</script>

Answer 4

将您的ID更改为class，因为ID必须是唯一的，因此请将您的html更改为：

<ul>
    <li class="foo">a</li>   
    <li class="foo">b</li>
    <li class="foo">c</li>
</ul>

和jquery

$(document).on('click','.foo', function(){
    if ($(this).text()=='a')
    {
        return false;
    }
    alert('not working');
});

使用onclick属性返回false

4 个答案: