使用Jquery在div中出现的所有控件的onclick事件?

时间:2015-01-12 10:54:05

标签: javascript jquery css jquery-datatables

我正在使用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>

2 个答案:

答案 0 :(得分:2)

将click事件绑定到div myDataTable_paginate“就像这样:

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

正如您在小提琴中的警告中所看到的,您可以通过e.target.id获取所点击对象的ID。

如果您想获取一个标签的内容,例如页码,您也可以使用e.target.innerHTML

获取值

Here is a fiddle

答案 1 :(得分:0)

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

$('body').on('click', '#myDataTable_paginate span a', function () {
    alert("Inside span");
});
&#13;
<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>
&#13;
&#13;
&#13;