Mam formularz używany do edycji danych w mojej bazie danych.A Użytkownik najpierw wybierze element za pomocą 3, po którym istniejące dane na elemencie zostaną dodane do formularza przez JQuery's .load ()

Problemem, w jakim stoję, jest to, że mam parę przycisków radiowych, które są dodawane dynamicznie do formularza a w formie.

Obecnie, po ładowaniu dynamicznej części, nawet jeśli przycisk RADIO "Nie" jest sprawdzany, Div jest nadal ładowany po załadowaniu dynamicznie dodanej części.

Edytować. Gdy przycisk "No" jest sprawdzony, chciałbym załadować całą porcję, ale z ukrytym po załadowaniu. Za pomocą "Tak" ponownie "nie".

Mój kod jQuery (ekstrakt):

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

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


});

Dynamicznie dodana część:

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>";

Formularz 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>
1
Kenneth .J 26 listopad 2013, 20:03

3 odpowiedzi

Najlepsza odpowiedź

Wygląda na to, że szukasz ON () z delegacją.

{{X0}

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

Zakłada to poza oczywiście #ItemDetailsContainer jest statyczny i nie dynamicznie usunięty / ponownie dodany.

Aby zainicjować stan danych dynamicznych, które możesz coś zrobić, podobnie jak do tego:

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

Oddziel każdą logikę do metody i wywołania w razie potrzeby.

2
Nope 26 listopad 2013, 16:41

To nie jest sposób użycia on dla dynamicznie dodanego elementu ... Musisz użyć na delegacji zdarzeń dla dynamicznie dodanego elementu ..

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

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


});
0
bipen 26 listopad 2013, 16:08

Problem polega na tym, że wydarzenie "zmiana" nie jest wywołane na właściwym elemencie Dom.

Czy możesz umieścić to wewnątrz strony, coś takiego:

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

    if ($('#BizEditItemRadioNo').is(':checked') && $('#BizEditItemRadioNo').val() == 'No') {
        $('.BizEdititemDiscountDetails').hide();
    } else {
        $('.BizEdititemDiscountDetails').show();
    }
});
});
0
Qambar Raza 26 listopad 2013, 16:09