Question

当我将它与.clone（）函数一起使用时，我在jQuery中触发show（）和hide（）函数时遇到问题。

显示或隐藏第一个ID没有任何问题，但是当涉及到克隆的ID时，显示或隐藏它并不起作用。

这是一个js样本：

var $country = $('#country')
    $('#add-countries').on('click', function () {
    $(this).before($country.clone());
});

$('#morelocal').on('click', function () {
    $('#showzipcode').toggle();
    $('#morelocal').hide();
});

$('#hidezipcode').on('click', function () {
    $('#morelocal').show();
    $('#showzipcode').hide();
});

这里有完整的jsfiddle：http://jsfiddle.net/stan255/Wh274/7/

Answer 1

因为你正在克隆元素

最好使用类而不是id，因为元素的id必须是唯一的
需要使用事件委托来支持动态添加的元素

所以

<div>
    <!-- use class instead of id -->
    <a href="#" class='morelocal'>
        Track ZIP/Postal code
    </a>
    <!-- use class instead of id -->
    <span class='showzipcode'>
        <input type="text" placeholder="e.g: 30196"/>
        <a href="#" class='hidezipcode'>cancel</a>
    </span>
</div>

然后

var $country = $('#country')
$('#add-countries').on('click', function () {
    var $clone = $country.clone().removeAttr('id');
    $(this).before($clone);
    $clone.find('.morelocal').show();
    $clone.find('.showzipcode').hide();
});
//use event delegation
$(document).on('click', '.morelocal', function () {
    var $div = $(this).closest('div');
    $div.find('.showzipcode').show();
    $div.find('.morelocal').hide();
});

$(document).on('click', '.hidezipcode', function () {
    var $div = $(this).closest('div');
    $div.find('.morelocal').show();
    $div.find('.showzipcode').hide();
});

演示：Fiddle，Fiddle2

显示/隐藏功能不适用于克隆功能

1 个答案: