Question

我有一个用于在我的数据库中编辑数据的表单。用户首先通过使用3选择一个项目，之后项目的现有数据将通过jQuery的.load（）

我现在面临的问题是我有一对动态添加到表单的单选按钮。基于单选按钮的值（即检查哪一个）我想要隐藏（）或表格中显示（）a。

目前，在加载动态部分后，即使选中单选按钮“No”，仍会在加载动态添加部分时加载div。

编辑。当选中“No”单选按钮时，我希望加载整个部分，但是在加载时隐藏它。目前，它显示出来，我隐藏它的唯一方法是从“否”点击“是”再次“否”。

我的jQuery代码（摘录）：

<!--Manages loaded item details-->
$('#ItemDetailsContainer').on('change',function(){

if ($('#BizEditItemRadioNo').is(':checked') && $('#BizEditItemRadioNo').val() == 'No') 
{
    $('.BizEdititemDiscountDetails').hide();
}
else
{
    $('.BizEdititemDiscountDetails').show();
}


});

动态添加部分：

echo"<div class='BizEditItemDetails'>";
            echo"<label for='BizEditItemName'>Name:</label>";
            echo"<input class='BizEditItemInput' type='text' id='BizEditItemName' name='BizEditItemName' size='30' maxlength='50' value=\"$name\">";
            echo"<span></span>";
        echo"</div>";

        echo"<div class='BizEditItemDetails'>";
            echo"<label for='BizEditItemPrice'>Price:</label>";
            echo"<input class='BizEditItemInput' type='number' id='BizEditItemPrice' name='BizEditItemPrice' step='any' min=0 value=\"$price\">";
            echo"<span></span>";
        echo"</div>";

        echo"<div class='BizEditItemDetails'>";
            echo"<label>Discount:</label>";
                echo"<input type='radio' class='BizEditItemInput' value='Yes' id='BizEditItemRadioYes' name='BizEditItemDiscount'>Yes";
                echo"<input type='radio' checked='checked' class='BizEditItemInput' value='No'  id='BizEditItemRadioNo' name='BizEditItemDiscount' step='any'>No";
            echo"</span></span>";
        echo"</div>";


        echo"<div class='BizEditItemDetails'>";
            echo"<div class='BizEdititemDiscountDetails'>";
                echo"<label for='BizEditItemPercent'>Discount Percentage</label>";
                echo"<input class='BizEditItemInput' type='number' id='BizEditItemPercent' name='BizEditItemPercent' step='any' min=0 value=\"$discountpercent\">%";
                echo"<span></span>";
            echo"</div>";
        echo"</div>";

        echo"<div class='BizEditItemDetails'>";
            echo"<div class='BizEdititemDiscountDetails'>";
                echo"<label for='BizEditItemDiscountPrice'>Discounted Price:</label>";
                echo"<input class='BizEditItemInput' type='number' id='BizEditItemDiscountPrice' name='BizEditItemDiscountPrice' step='any' min=0 value=\"$discountprice\" readonly >";
                echo"<span></span>";
            echo"</div>";
        echo"</div>";

        echo"<div class='BizEditItemDetails'>";
                echo"<label for='BizEditItemQty'>Quantity:</label>";
                echo"<input class='BizEditItemInput' type='number' id='BizEditItemQty' name='BizEditItemQty' min=0 value=\"$qty\">";
                echo"<span></span>";
        echo"</div>";



        echo"<div class='BizEditItemDetails'>";
            echo"<label for='BizEditItemDesc'>Desc:</label>";
            echo"<textarea class='BizEditItemInput' id='BizEditItemDesc' name='BizEditItemDesc' cols='30' rows='5'>$desc</textarea>";
            echo"<span></span>";
        echo"</div>";

        echo"<div class='BizEditItemDetails'>";
            echo"<input class='BizEditItemInput' style='margin-left:360px' type='submit' name='BizEditItemSubmit' value='Submit'>";
        echo"</div>";

HTML表格：

<form id='BizEditItem' name='BizEditItemDetails' method='post' action='edititemprocess.php'novalidate='novalidate'>
        <div class='BizEditItemDetail'>
            <label for='BizEditItemCat'>Category:</label>
            <select class='BizEditItemInput' id='BizEditItemCat' name='BizEditItemCat'>
            </select>
            <span></span>
        </div>

        <div class='BizEditItemDetail'>
            <label for='BizEditItemSubCat'>SubCategory:</label>
            <select class='BizEditItemInput' id='BizEditItemSubCat' name='BizEditItemSubCat'>
            </select>
            <span></span>
        </div>

        <div class='BizEditItemDetail'>
            <label for='BizEditItemOld'>Item:</label>
            <select class='BizEditItemInput' id='BizEditItemOld' name='BizEditItemOld'>
            </select>
            <span></span>
        </div>

        <div id='ItemDetailsContainer'>
        </div>
    </form>

Answer 1

您似乎正在寻找on()代表团。

带有委托的

on()要求您绑定到要绑定到的动态内容的最近的静态父级，然后将实际元素指定为要将事件委派给的第二个参数，类似于此：

$('#ItemDetailsContainer').on('change', '#BizEditItemRadioNo' function () {
    if(this.checked && this.value === 'No'){
        $('.BizEdititemDiscountDetails').hide();
    } else {
        $('.BizEdititemDiscountDetails').show();
    }
});

假设偏离航线#ItemDetailsContainer是静态的，不会动态删除/重新添加。

要初始化动态数据的状态，您可以执行某些操作，类似于：

var handleBizEditItemRadioNoChange = function (element) {
    if (element.checked && element.value === 'No') {
        $('.BizEdititemDiscountDetails').hide();
    } else {
        $('.BizEdititemDiscountDetails').show();
    }
}

// When code has been dynamically added call this method to initialize any required default states, etc..
var initializeDynamicData(){
    handleBizEditItemRadioNoChange($('#BizEditItemRadioNo'));
}

$('#ItemDetailsContainer').on('change', '#BizEditItemRadioNo', function(){
     handleBizEditItemRadioNoChange(this);
});

将每个逻辑分成一个方法，并在需要时调用。

Answer 2

这不是使用on来动态添加元素的方法......您需要在事件委托上使用动态添加的元素..

 $('#ItemDetailsContainer').on('change','#BizEditItemRadioNo',function(){

  if (this.checked && this.value == 'No') 
 {
   $('.BizEdititemDiscountDetails').hide();
 }
 else
 {
  $('.BizEdititemDiscountDetails').show();
 }


});

Answer 3

问题是没有在正确的DOM元素上触发'change'事件。

你可以把它放在页面内准备好了，像这样：

$(function () {
<!--
Manages loaded item details -->
$('#ItemDetailsContainer').on('change', function () {

    if ($('#BizEditItemRadioNo').is(':checked') && $('#BizEditItemRadioNo').val() == 'No') {
        $('.BizEdititemDiscountDetails').hide();
    } else {
        $('.BizEdititemDiscountDetails').show();
    }
});
});

基于表单中动态添加的输入的值应用jQuery

3 个答案: