1

我在运行在 JQuery 下运行的第二个进程时遇到问题，如下面的代码。

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head>
<body>
    <script type="text/javascript" src='jquery-1.6.2.min.js'> </script>
    <div id="displayArea1">
    </div>
    <br/>
    <div id="displayArea2">
    </div>
    <input id="btnSet" type="button" value="Set The Value" />
    <script>

        //The input that should i use
        var itemToPrintOut1 = "[Input1 (working)]     Search <strong style='cursor:pointer' title='Click here'>IP{<span id='ip1'>192.168.2.56,192.168.2.89,192.168.2.75</span>}</strong> that has accessed to MAIL-SERVER{192.168.2.8}";
        var itemToPrintOut2 = "[Input2 (not working)] Search <strong style='cursor:pointer' title='Click here'>IP{<span id='ip2'>192.168.2.56,192.168.2.89,192.168.2.75</span>}</strong> that has accessed to MAIL-SERVER{192.168.2.8}";

        $("#displayArea1").html(itemToPrintOut1);  //If I enable this line, it is works as what i want(because it is using jquery)

        $("#btnSet").click(function(){
            $("#displayArea2").html(itemToPrintOut2);
        });

        $("#ip1").click(function(){
            alert("Normal method, data = " + $("#ip1").html());
        });

        $("#ip2").click(function(){
            alert("The method I should use, data = " + $("#ip2").html());
        });
    </script>
</body>

第一次（加载时）它将显示itemToPrintOut1文本，我可以单击 IP 地址。我对此没有任何意见！

但是当我单击按钮并显示第二个文本itemToPrintOut2时，我无法再单击 IP。

任何人都可以帮助我如何确保第二个输出也可以与 JQUERY 一起使用。对我来说，有很多事情也与这个问题有关。它与JQuery加载有关吗？

谢谢

4

3 回答 3

1

您正在尝试将处理程序绑定到尚不存在的元素，请尝试以下操作：

<script>

    //The input that should i use
    var itemToPrintOut1 = "[Input1 (working)]     Search <strong style='cursor:pointer' title='Click here'>IP{<span id='ip1'>192.168.2.56,192.168.2.89,192.168.2.75</span>}</strong> that has accessed to MAIL-SERVER{192.168.2.8}";
    var itemToPrintOut2 = "[Input2 (not working)] Search <strong style='cursor:pointer' title='Click here'>IP{<span id='ip2'>192.168.2.56,192.168.2.89,192.168.2.75</span>}</strong> that has accessed to MAIL-SERVER{192.168.2.8}";

    $("#displayArea1").html(itemToPrintOut1);  //If I enable this line, it is works as what i want(because it is using jquery)

    $("#btnSet").click(function(){
        $("#displayArea2").html(itemToPrintOut2);

         $("#ip2").click(function(){
               alert("The method I should use, data = " + $("#ip2").html());
         });
    });

    $("#ip1").click(function(){
        alert("Normal method, data = " + $("#ip1").html());
    });

</script>

然后，当您单击时ip1，它会添加ip2html 和他的处理程序。

于 2012-07-25T06:04:33.533 回答
1

当您将点击事件添加到 ip2 时，它不存在。您可以使用 jquery 'live' 将事件绑定到页面上稍后出现的任何内容上。

$('#ip2').live('click',function() {});

这将在稍后添加到文档中的任何 dom 元素上绑定 click 事件，如果它们的 id 为 'ip2'

于 2012-07-25T06:06:59.067 回答
1

您可以使用 .live() 而不是 .click() 在运行时绑定事件。由于 .live() 已被弃用，您可能想尝试 .on() 方法。

于 2012-07-25T06:07:10.457 回答