jQuery onclick 加载随机使用 firefox

Question

所以我有几个带有onclick 功能的“盒子”：

<div class="box" onclick="load(1);return false;"></div>
<div class="box" onclick="load(2);return false;"></div>

onclick 函数触发一个函数，该函数读取几个单独的 .php 文件（example1.php 和 example2.php）的内容。 这些文件包含使用 fieldset 而不是 div 制作的其他框。

function load(num){ 
$("#loadthis").load("example"+num+".php");
}

上面的函数正在改变这个div的内容：

<div id="loadthis">Load my fieldset boxes</div>

到目前为止一切正常，直到我单击字段集框。

当我单击它时，字段集的背景颜色应该会改变，并且字段集中的单选也应该被选中（因为 css 样式），但这两种情况都不会发生。但我仍然可以在单击收音机（而不是框）时选择收音机。

我已经在 IE 和 Chrome 中对其进行了测试，这段代码大部分时间都在那里工作。 但在 Firefox 中，50% 的时间我无法选择字段集框。

我尝试使用 .on( 类，但效果相同。

$('fieldset.type-a').children('.row').children('.box.col-4').on("click", load);
function load(){
var index = $('fieldset.type-a').children('.row').children('.box.col-4').index( this );
index+=1;
$("#loadthis").load("fs"+index+".php"); 
}

好的，经过一番搜索，我发现在另一个被调用的 .js 文件中已经有一个 onclick 函数：

 function handleStep2() {
  $('.step-form-2 input[type=radio]').change(function () {
    $(this).closest('fieldset').find('.box').removeClass('active');
    $(this).closest('.box').addClass('active');
    $(this).attr('checked', 'checked');
 });

 $('.step-form-2 .select-box .box').click(function () {
   $(this).find('input[type=radio]').trigger('change');
 });
 }

我现在将尝试合并代码，看看是否可以消除点击时未激活活动类的错误。

已解决：我确实通过将两个代码合并为一键式功能来解决它​​。感谢您的所有帮助，但我仍然想知道这是否可以通过不同的方式完成？

Answer 1

查看事件委托，如果您使用的是 jQuery，这很容易

查看jQuery API 以获得.on(

您还想确保您使用的是不显眼的 JS，因此将其从 HTML 中拉出，将其作为事件侦听器放入 .js 文件中，并在 DOM 作为之前的最后一件事加载后加载脚本你的结束</body>标签

Answer 2

这应该是关于加载 php 文件内容的延迟。 当你点击其中一个甚至需要时间时它是否有效？

也许你应该 ajax 来加载 php 文件。顺便说一句，您可以使用 GET 或 POST 方法将数据发送到 php 文件。

您可以查看this 示例。

Answer 3

如果您的函数在 IIFE 中初始化，则内联 js 无法访问此函数。 你说这有时有效，这很奇怪..

IIFE 是一个用于创建胶囊的包装函数，因此客户端无法在运行时修改您的脚本。 看起来像这样：

(function(){
 /* code */ 
}()); 

创建js-events会更好：

on('body', 'click', '.box', function(e) {
    console.log(e.target); // this is the clicked list item
});

希望对你有帮助..