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');
 });
 }

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

已解决：我通过将两个代码合并到1次点击功能来解决它。谢谢你所有的帮助，但我仍然想知道这是否可以用不同的方式完成？

Answer 1

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

查看.on(

的jQuery API

此外，您还要确保使用不显眼的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
});

希望有所帮助......

jQuery onclick加载随机使用firefox

3 个答案: