Question

我的链接如下：

<div id="div_1">
    <a href="#" id="link_1"><img height="64" src="/images/image.png" width="64" />Link1</a>
</div>

我使用jQuery设置click事件，如下所示：

var old_html;
$('#link_1').click(function() {     
    old_html = $('#div_1').html();
    $('#div_1').html('<input type="button" value="Cancel" id="cancel_button">');
    $('#cancel_button').mouseup(function(){
        $('#div_1').html(old_html);
    }); 
});

我可以点击链接，div的html被取消按钮取代。然后我可以点击取消按钮，html将恢复原来的状态。

但如果我再次点击链接，则没有任何反应。点击事件不再附加。我应该如何更改代码，以便我可以通过单击链接然后单击取消按钮来回切换多次？谢谢你的阅读。

Answer 1

使用$().toggle( handler(event), handler(event) )方法：http://api.jquery.com/toggle-event/

样本用法：

$('#target').toggle(function() {
    alert('First handler for .toggle() called.');
}, function() {
    alert('Second handler for .toggle() called.');
});

单击#target时，函数轮流执行。

Answer 2

请尝试使用this版本。在这里，我们不会通过更改其HTML内容来刷新DOM。而只是在点击它时管理元素的可见性。

Answer 3

使用onClick on a tag

Answer 4

替换HTML时，将删除单击处理程序。您必须在设置旧HTML后重新设置它：

function showCancelButton() {
    var old_html;
    old_html = $('#div_1').html();
    $('#div_1').html('<input type="button" value="Cancel" id="cancel_button">');
    $('#cancel_button').mouseup(function(){
        $('#div_1').html(old_html);
        $('#link_1').click(showCancelButton);
    });
}

$(document).ready(function() {
    $('#link_1').click(showCancelButton);
});

但是，我还建议将链接和取消按钮放入HTML并切换各自的可见性：

function toggleLinkCancel() {
    $('#link_1').toggle();
    $('#cancel_button').toggle();
}

$(document).ready(function() {
    $('#link_1').click(toggleLinkCancel);
    $('#cancel_button').mouseup(toggleLinkCancel);
});

您的HTML必须包含取消按钮，默认情况下通过CSS隐藏。

这样，您的内容和代码就会分开，从长远来看，这更容易维护。

如何重构这一小部分jQuery以使其正常工作

4 个答案: