使用Jquery在div中存在的所有控件的Onclick事件？

Question

我正在使用Jquery數據表。 如何對div標簽中的所有標簽執行onclick事件。 現在，onclick事件適用於div中的錨標記。 但是對於帶有跨度的錨標記。 請幫我解決這個問題。 提前致謝。

這是我的Jquery和HTML代碼：

 $(function () {
                $('body').on('click', '#myDataTable_paginate a', function () {
                    alert("Inside");
            });

<div id="myDataTable_paginate" class="dataTables_paginate paging_full_numbers">
        <a id="myDataTable_first" class="first paginate_button paginate_button_disabled" tabindex="0">First</a>
        <a id="myDataTable_previous" class="previous paginate_button paginate_button_disabled" tabindex="0">Previous</a>
        <span>
    <a class="paginate_active" tabindex="0">1</a>
    <a class="paginate_button" tabindex="0">2</a>
    <a class="paginate_button" tabindex="0">3</a>
    <a class="paginate_button" tabindex="0">4</a>
    <a class="paginate_button" tabindex="0">5</a>
    </span>
        <a id="myDataTable_next" class="next paginate_button" tabindex="0">Next</a>
        <a id="myDataTable_last" class="last paginate_button" tabindex="0">Last</a>
        </div>
           </div>

Answer 1

只需將click事件綁定到div myDataTable_paginate，如下所示：

$("#myDataTable_paginate").click(function(e){
   alert(e.target.id);
});

正如您在小提琴中發出的警報中所看到的那樣，您可以通過e.target.id獲取被單擊對象的ID。

如果您想獲取一個標簽的內容（如頁碼），也可以使用e.target.innerHTML來獲取值

這是一個小提琴

Answer 2

 $('body').on('click', '#myDataTable_paginate>a', function () { alert("Inside Div"); }); $('body').on('click', '#myDataTable_paginate span a', function () { alert("Inside span"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="myDataTable_paginate" class="dataTables_paginate paging_full_numbers"> <a id="myDataTable_first" class="first paginate_button paginate_button_disabled" tabindex="0">First</a> <a id="myDataTable_previous" class="previous paginate_button paginate_button_disabled" tabindex="0">Previous</a> <span> <a class="paginate_active" tabindex="0">1</a> <a class="paginate_button" tabindex="0">2</a> <a class="paginate_button" tabindex="0">3</a> <a class="paginate_button" tabindex="0">4</a> <a class="paginate_button" tabindex="0">5</a> </span> <a id="myDataTable_next" class="next paginate_button" tabindex="0">Next</a> <a id="myDataTable_last" class="last paginate_button" tabindex="0">Last</a> </div> </div>