一個錨元素

Question

現在我有我的HTML結構像這樣的孩子一定時，點擊不重定向：

<a class="gallery-item" href="#"> 
    <div class="top"> 
     <div class="title"></div> 
    </div> 


    <div class="bottom"> 
     <div class="tags"> 
      <span class="weight"></span><br> 
      <span><input type="checkbox" id="read" name="read" value="0"></span> 
      <span class="date"></span> 
     </div> 
    </div> 
</a> 

我的問題是目前的複選框不會改變，而是重定向我在href 。

我周圍搜索，發現一些代碼可能prerhaps工作，但是，他們都阻止複選框檢查或取消選中。

我試着用jQuery來實現這個功能，但是這仍然不會產生結果。

我正在使用的當前代碼，在這種情況下，項目是父元素。

$(item).click(function(e) { 
    var sender = $(e.target); 

    if (sender.prop("id") == "read") { 
     var checked = $("#read", item).prop("checked"); 

     if (checked == true) { 
      $("#read", item).prop("checked", false); 
     } else { 
      $("#read", item).prop("checked", true); 
     } 

     return false; 
    } 

    return true; 
}); 

我需要一種方法來觸發的複選框的.change()爲好。

任何幫助或建議非常感謝。

Answer 1

您可以使用事件的stopPropagation()方法，當你點擊input防止事件冒泡的DOM和事件處理程序的a被抓，是這樣的：

$(item).find('input').on('click', function(e) { 
    e.stopPropagation(); 
}); 

Working example

另請注意，您的點擊處理程序中的邏輯比需要更復雜，因爲它只是簡單地切換子項input。試試這個：

$('a').click(function(e) { 
    $(this).find('input').prop('checked', function(i, p) { 
     return !p; 
    }); 
}); 

$('input').click(function(e) { 
    e.stopPropagation(); 
}); 

Working example

你可以修改上面的選擇，以滿足您的特定需求。

Answer 2

現在，我有我的HTML結構是這樣的：[...]

你的問題是，你正在創建無效的HTML - 在這種情況下，你不能指望預測的行爲呢。

的content model for the a element是

透明的，但必須有沒有interactive content後裔。

input一種元素，如果不是的hidden類型，是交互式內容 - 並且因此不允許用作a元件的後代。

因此，您應該在這裏做的第一件事是修復錯誤的HTML代碼。