jQuery在父div中選擇div元素

Question

大家好，希望您能幫我。

我試圖選擇另一個div內的div元素並存儲其id或class。 我試圖做這個簡單的功能，看看是否可行：

$('div').on('click', function(){
    alert($(this).attr("id"));
});

但是，每次我單擊任何div例如ID為“ content”輸出的div時，我得到的都是“ content-link2”。

因此，我的問題是如何更改該代碼，使其在div“ content-link2”內部顯示

<div id="content-link2">
    <div class="logo">
        <img class="images" id="image" src="#" alt="Your Logo">
    </div>
    <div contenteditable="true" id="content" class="draggable ui-widget-content refresh ui-draggable ui-draggable-handle" style="position: relative;"><p>hlo</p></div>
    <div id="comments">
        <form name="forma">
            <textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">Comments here...
            </textarea><br>
            <input type="submit" value="Ready!" id="send-data"><!--onClick="writeComment(e);"--> 
            <div id="editTxt" class="refresh" contenteditable="true">
                <p>This text can be by the user.</p>
            </div>
        </form>
    </div>
</div>

Answer 1

您因為事件冒泡而得到了嘗試

$('div').on('click', function(e){
    alert($(this).attr("id"));
    e.stopPropagation()
});

Answer 2

您需要稍微更改script 。

這是警告單擊任何元素的id的解決方案。 如果沒有id，則警報顯示undefined

 $(document).on('click', function(e){ alert($(e.target).attr("id")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content-link2"> <title>Template 1</title> <link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css"> <div class="logo"> <img class="images" id="image" src="#" alt="Your Logo"> </div> <div contenteditable="true" id="content" class="draggable ui-widget-content refresh ui-draggable ui-draggable-handle" style="position: relative;"><p>hlo</p></div> <div id="comments"> <form name="forma"> <textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">Comments here... </textarea><br> <input type="submit" value="Ready!" id="send-data"><!--onClick="writeComment(e);"--> <div id="editTxt" class="refresh" contenteditable="true"> <p>This text can be by the user.</p> </div> </form> </div> </div> 

Answer 3

您已經很親密，您需要做的是：

$('#content-link2 > div').on('click', function(){
    alert($(this).attr("id"));
});

這樣，您可以定位父div所有子元素。 您可以在此處查看示例 。