Question

我正在使用一块JS两次，两次不同但相同的事件。

为了使它更简单，让我说我得到了：

<script type="text/javascript">
    $(function(){
        $(".iframe").load(function(){
               $(this).contents().find("form").delegate(".clickThisCheckBox","click",function(){
                alert(this)
            })
        })
    })
</script>

<div class="tabs">
    <ul class="tabs-nav">
        <li><a href="#products">Products</a></li>
        <li><a href="#accessories">Accessories</a></li>
    </ul>
</div>

<div class="content">
    <div id="products">
        <iframe class="iframe">
            <form action="?" method="post">
                <input type="checkbox" name="checkBox1" class="clickThisCheckBox" />
            </form>
        </iframe>
    </div>

    <div id="accessories">
        <iframe class="iframe">
            <form action="?" method="post">
                <input type="checkbox" name="checkBox2" class="clickThisCheckBox" />
            </form>
        </iframe>       
    </div>
</div>

这是一个比我更简化的版本，但完全相同的概念。

因此，当页面加载时，单击打开选项卡中的复选框，您将成功获取包含该对象的警告框。当您单击下一个选项卡并尝试单击该复选框时，没有任何反应。

没有AJAX或单独加载。一切都在初始页面加载时呈现。两个iframe都是同时加载的，您可以通过切换到另一个标签来访问其他iframe。

JS是否需要在函数中运行并在每次单击选项卡时运行？似乎无法用手指缠绕这一个。

更新：将它缩小到绝对是JS只运行一次，所以只有第一个标签中的第一个iFrame获取所有正确的变量和绑定到元素的事件。

更新：似乎已经弄清楚了。在继续使用iFrame时，我不得不将我的所有JS都放到一个函数中并在$(".iframe").load()上运行它，并且每当点击一个新标签时，例如$(".nav-cont li a").bind("click",function(){ //run the javascript })

Answer 1

如果要将load事件绑定到两个相同的iframe：

$("div.contents").delegate(".iframe", "load", function(){
   alert('one of the iframes loaded');
});

一个处理函数处理两个iframe的“加载”事件。

<强> P.S。更新您不能像在评论中解释的那样使用iframe。只需使用div代替并设置overflow：hidden;如果目的是用数据限制特定区域的显示大小 - 在css文件中设置：

.form_container{width:500px;heigth:500px;overflow:hidden;}

你的html将是：

<div class="tabs">
    <ul class="tabs-nav">
        <li><a href="#products">Products</a></li>
        <li><a href="#accessories">Accessories</a></li>
    </ul>
</div>

<div class="content">
    <div id="products">
        <div class="form_container">
            <form action="?" method="post">
                <input type="checkbox" name="checkBox1" class="clickThisCheckBox" />
            </form>
        </div>
    </div>

    <div id="accessories">
        <div class="form_container">
            <form action="?" method="post">
                <input type="checkbox" name="checkBox2" class="clickThisCheckBox" />
            </form>
        </div>
    </div>

js将是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('form').find(':checkbox').click(function(){
        alert('something got clicked');
    })
})
</script>

Answer 2

从我提供的代码中我可以看到，您将加载事件处理程序附加到附加时可能尚未加载的元素。

您是否尝试将代码包装在$(document).ready()中以确保在将事件处理程序附加到页面上之前可以对页面上的所有元素进行操作？

javascript只在页面上需要两次时才能工作一次

2 个答案: