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>

查询：

$('#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 回答