Question

我对jQuery很陌生，这个问题让我感到困难了好几个小时。

假设我有这样的html结构（摘录）：

<div id="div1">
    <input type="text" class="write" id="write01"/>
    <div id="subDiv2"></div>
</div>
<div id="div2">
    <input type="text" class="write" id="write02"/>
    <div id="subDiv2"></div>
</div>

这样附加的JavaScript文件（摘录）：

$(function(){

    var $my_focus = null;

    var $my_container = null;

    $(document).ready(function(){

        $(".write").focus(function(){

            if ($my_container !== null){
                $my_container.empty();
            }

            $my_focus = $(':focus');

            $my_container = $my_focus.next("div");

            $my_container.load("some.jsp");

        });

    });

});

假设JSP文件包含一个html表结构，它将作为按钮：

<div class="someContainer" id="someId">

    <table class="someTableClass" id="someTableId" >

        <tr class="someRowClass">

              <td class="commonClass specialClass1">Button1</td>

              <td class="commonClass specialClass2">Button2</td>

        </tr>

    </table>

</div>

到目前为止，一切顺利，JSP文件成功加载到用户点击的输入字段的兄弟div中，但是......

问题是：

如何设置一个触发器，例如我点击其中一个加载的td元素时会触发？

天真地我尝试用$(document).ready这样做：

$(document).ready(function(){

    $('.commonClass').click(function(){

        alert("hello);

    });

});

但是，这显然只有在我从头开始加载JSP时才有效。

Answer 1

因为td元素是动态加载的，所以需要使用委托的事件处理程序。试试这个：

$(document).on('click', '.commonClass', function(){
    alert("hello");
});

此外，您可以整理原始代码，因为无需重新选择具有:focus的元素：

$(".write").focus(function() {
    $(this).next("div").empty().load("some.jsp");
});

Answer 2

您需要使用事件委派来为动态添加的元素附加事件处理程序

$(document.body).on('click','.commonClass',function(){

访问通过jQuery加载的元素

2 个答案: