Question

我有这样的div结构：

<div class="sez-form ripart">
    <table class="inc_prev"></table>
    <div class="previsioni">A</div>
</div>

在表“inc_prev”中，我有一个按钮，允许您添加其他组。因此，通过按下按钮，您将获得如下结构：

<div class="sez-form ripart">
    <table class="inc_prev"></table>
    <div class="previsioni">A</div>
</div>
<div class="sez-form ripart">
    <table class="inc_prev"></table>
    <div class="previsioni">B</div>
</div>

每个“inc_prev”表都有这个html：

<table class="inc_prev">
<tbody>
<tr>
<td><label>Mese: </label><select id="mese[]" name="mese[]"></td>
<td><label>Anno: </label><select id="anno[]" name="anno[]"></td>
<td><label>Percentuale: </label><input class="importo" type="text" name="percent[]" maxlength="14" size="15" value="">%</td>
<td><img class="addRow" src="../images/plus.png"></td>
</tr>
</tbody>
</table>

这是我的JS：

$(document).on('blur','.importo',function(){
    var input_value = $(this).val();
    var azione =$('#azione').val();
    if ($(this).closest('.sez-form').find('.previsioni').length) {
        $('.previsioni').load('bp/ripart_prev.php?perc='+input_value+'&id='+azione);
    }else{
        console.log('qui');
        $(this).closest('.sez-form').append('<div class="previsioni"></div>');
        $('.previsioni').load('bp/ripart_prev.php?perc='+input_value+'&id='+azione);
    }
});

如果它不存在则附加“previsioni”div或更新它从DB加载内容。在起始情况下它工作正常：previsioni div以正确的方式添加或更新。如果我点击加号按钮并在触发此JS时添加第二个块，则“previsioni”div将使用相同的内容进行更新。所以我的问题是：“如何更改我的JS以便在执行时只更新目标”previsioni“？”所以，如果我模糊了第二个“importo”，那么它只是“previsioni”（B）得到更新？我已经使用了最近提到的here，但这并没有阻止其他previsioni更新

Answer 1

问题是$('.previsioni')将选择该类的所有现有元素。您需要重用关系来定位特定的div。我在代码片段中缓存了对象中的$(this).closest('.sez-form').find('.previsioni')。

阅读内联评论

$(document).on('blur','.importo',function(){
    var input_value = $(this).val();
    var azione =$('#azione').val();

    //Use the relationship again to traverse and cache it in a vraible the content
    var previsioni = $(this).closest('.sez-form').find('.previsioni');

    //If exist
    if (previsioni.length) {            
        previsioni.load('bp/ripart_prev.php?perc='+input_value+'&id='+azione)
    }else{
        console.log('qui');

        //Create div using JQuery
        var div = $('<div class="previsioni"></div>');
        //Load the content
        div.load('bp/ripart_prev.php?perc='+input_value+'&id='+azione)

        //Append the data
        $(this).closest('.sez-form').append(div);
    }
});

仅针对相关的div

1 个答案: