Question

我遇到了在DOM准备就绪时运行jQuery的问题。

我有两个表单，每个表单都有一个<select>，当我的代码运行时，它应加载其他表单元素。

当用户首次加载页面时，我希望ready()上的这些选择能够获取某些属性（表单操作，load()目标等），然后加载它。使用{{时工作完全正常1}}我可以让一个change()工作，但不能同时工作。

HTML

<select>

JS

这适用于单个表单，但第二个不会加载

<form action="php/bagCreate/newBag_bag.php" method="post" id="form1">
  <select id="target" data-target="upForm" class="get" name="bagLevel">
    <option>1</option>   
    <option>2</option>  
    <option>3</option>   
  </select>        
</form>

<form action="php/bagCreate/storeItems_bag.php" method="post" id="form2">      
  <select id="target2" data-target="upFormType" class="get" name="itemName">
    <option>A</option>   
    <option>B</option>  
    <option>C</option>   
  </select>        
</form>

将ready函数中的$(document).ready(function(){ $('select.get').ready(function() { var action = $('select.get').parent().attr('action'); var target = $('select.get').data('target'); $('#'+target).load(action, $('select.get').parent().serializeArray()); });更改为select.get会导致不加载任何表单。

使用this对两种形式都完美无缺，尽管它有点重复

change()

Answer 1

只需在页面加载时触发更改事件吗？

$('select.get').change(function() {        
  var action = $(this).parent().attr('action');  
  var target = $(this).data('target');  
  $('#'+target).load(action, $(this).parent().serializeArray());      
}).change(); //trigger it on pageload as well ...

Answer 2

使用each() method将代码应用于jQuery对象中的多个select元素。此外，正如评论所示，ready()方法应保留给document对象。

例如：

$(document).ready(function() {
    $('select.get').each(function(i) {
        var action = $(this).parent().attr('action');
        var target = $(this).data('target');
        $('#'+target).load(action, $(this).parent().serializeArray());
    });
});

注意each() 回调函数的每次迭代中，$(this)是否指向$('select.get')中的_i元素对象

Answer 3

您的第一个代码段应如下所示：

$(document).ready(function(){
    $('select.get').each(function() {
        var action = $('select.get').parent().attr('action');
        var target = $('select.get').data('target');
        $('#'+target).load(action, $('select.get').parent().serializeArray());     
    }
);

将ready方法更改为每个方法将为使用选择器找到的每个元素运行一次定义的函数。

Answer 4

$(document).ready(function(){
    $('select.get').each(function(){
        var $t = $(this);
        var $p = $t.parent();
        var action = $p.attr('action');
        var target = $t.data('target');
        $('#'+target).load(action, $p.serializeArray());
    });
});

jQuery ready（）问题 - $（this）不可用，代码只适用于一个元素

HTML

JS

4 个答案: