如何禁用標籤上的jQuery點擊事件？

HTML：

<div class="wrapper"> 
    <label class="control-label" for="TopicWords">Label</label> 
    <div class="controls"> 
    <input type="text" id="TopicWords"> 
    </div> 
</div> 

<br/><br/> 
<span id="message"></span>

JS：

$('.wrapper').on('click','input#TopicWords', function() { 
    $('#message').fadeIn('fast').text('Clicked').fadeOut('slow'); 
})

Click事件上都input#TopicWords或label運行。如何使它只運行時input#TopicWords被點擊

是否有除了其他方式比：

$(".control-label[for='TopicWords']").on('click', function() { 
    return false; 
});

或快捷方式：

$(".control-label[for='TopicWords']").on('click', false);

UPDATE：包裝的內容是動態的，有時我不沒有類控制的div。

來源

2016-01-27 whitesiroi

如果我正確理解你的問題，你已經添加的解決方案是要走的路。單擊標籤時點擊事件也會觸發的原因是該標籤上的for屬性。

它說如果你點擊我作爲標籤我會把焦點放在for屬性中指定的輸入。

除了你給的解決方案。您可以選擇刪除該標籤的for屬性，但這是你想要的東西？

來源

2016-01-27 07:08:34

謝謝你的評論。你是對的。也許，我有一種方法可以捕捉到我的點擊事件，如果點擊LABEL，不要運行它。 – whitesiroi

我需要屬性，類似CMS的系統生成它。 – whitesiroi

我測試了所有建議的答案，但它們不起作用。但是，你的確是這樣，這是一個好的/合適的解決方案。 –

試試這個

$('#TopicWords').click(function() { 
    $('#message').fadeIn('fast').text('Clicked').fadeOut('slow'); 
})

來源

2016-01-27 07:06:51 progrAmmar

謝謝你的評論。由於我擁有動態內容，因此無法使用。 – whitesiroi

那麼你如何獲得id TopicWords ?.你能否詳細說明如何加載內容？ – progrAmmar

我通過ajax獲取它。 – whitesiroi

其他解決方案可以檢查是否輸入元素被點擊了

$('.wrapper').on('click','input#TopicWords', function(e) { 
    if (e.target.tagName==='INPUT') { 
    $('#message').fadeIn('fast').text('Clicked').fadeOut('slow'); 
    } 
})

來源

2016-01-27 07:12:43

它一直是'INPUT' .. – Rayon

感謝您的評論。在這兩種情況下它都會發火。 – whitesiroi

@RayonDabre，你是對的，兩個點擊相同的事件。 –

請加上這個js也：

$('.wrapper label').on('click', function(event) { 
    event.preventDefault(); 
});

來源

2016-01-27 07:24:46

感謝您的評論。我想通過一個已經存在的點擊事件來解決它：$（'。wrapper'）。on（'click'，'input＃TopicWords'，function（）{...} – whitesiroi

如何禁用標籤上的jQuery點擊事件？

回答

相關問題