0

基本的に、特定のDIVでテキストフィールドのいずれかが変更された場合、別のDIVからHTMLを空にします。

HTML：

<div class="row">

<div class="span4">

    <h3 class="heading" data-toggle="collapse" data-target="#shipper">Shipper Information</h3>

    <div class="bg-light collapse in bg-light" id="shipper">

        <label>Name</label>
        <input type="text" id="shipper_name" />

        <label>Address 1</label>
        <input type="text" id="shipper_address1" />

        <label>Address 2</label>
        <input type="text" id="shipper_address2" />

        <label>City</label>
        <input type="text" id="shipper_city" />

        <label>State</label>
        <input type="text" id="shipper_state" />

        <label>Zip</label>
        <input type="text" id="shipper_zip" /> 

    </div>

</div>

<div class="span4">

    <h3 class="heading" data-toggle="collapse" data-target="#consignee">Consignee Information</h3>

    <div class="bg-light collapse in bg-light" id="consignee">

        <label>Name</label>
        <input type="text" id="consignee_name" />

        <label>Address 1</label>
        <input type="text" id="consignee_address1" />

        <label>Address 2</label>
        <input type="text" id="consignee_address2" />

        <label>City</label>
        <input type="text" id="consignee_city" />

        <label>State</label>
        <input type="text" id="consignee_state" />

        <label>Zip</label>
        <input type="text" id="consignee_zip" />

    </div>

</div>

JQuery：

$('#shipper').find('input:text').change(function(){
    alert('I changed.');
    carriersClear('Shipper Details Changed');
    return false;
});

$('#consignee').find('input:text').change(function(){
    alert('I changed.');
    carriersClear('Consignee Details Changed');
    return false;
});

#consigneeバージョンは正常に動作しますが、基本#shipper的に同じであるため、意味がありません。

コンソールでもエラーは発生しません。

編集：私は荷送人と呼ばれる別のDivを持っていました。（はい。私はばかです。） すべての人への教訓：Ctrl+Fはあなたの親友になることができます。

4

1 に答える 1

1

あなたの問題はにあると思いますcarriersClear()。しかし、これは機能します：

$('input[type="text"]', '#shipper').on('change', function(){
    console.log("I changed.");
    carriersClear('Shipper Details Changed');
    //No need to return false.
});

$('input[type="text"]', '#consignee').on('change', function(){
    console.log("I changed.");
    carriersClear('Consignee Details Changed');
});

これも機能します：

//Here we assign only one event handler to #consignee.
$('#consignee').on('change', 'input[type="text"]', function(e){
    console.log("I changed.");
    carriersClear('Consignee Details Changed');
});

理解を深めるために、イベントハンドラーに関するこのビデオをご覧になることをお勧めします。

これがフィドルです

于 2013-03-26T16:37:23.990 に答える