javascript - 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>

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

当我单击它时，字段集的背景颜色应该会改变，而且字段集中的 radio 也应该被选中(因为 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

研究事件委托(delegate)，如果您使用的是 jQuery，那很容易

查看jQuery API对于 .on(

同时你想确保你使用的是不显眼的 JS，所以把它从你的 HTML 中拉出来，把它放在 .js 中。文件作为事件监听器并在 DOM 加载后作为关闭前的最后一件事加载脚本 </body>标签