Question

如果我点击此其他链接，我即尝试更换链接。但是当我使用jquery replace()或html();添加链接时，我无法点击工作。我做错了什么？

这是我尝试使用的代码

$(document).ready(function() {
        var countTotal = $('#myTable tr').length;
        $("#hideTotalCount").val(countTotal);

        $('#clickMeAll').click(function() {
            var totalCount = $("#hideTotalCount").val() - 1;
            $('#myTable').paginateTable({ rowsPerPage: totalCount, pager: '.pageNumbersOnly', maxPageNumbers: 4 });
            $('#placeLink').replaceWith("<a href='#' id='clickMeRegular'>Back to regular</a>");
        });

        $('#clickMeRegular').click(function() {
            var totalCount = $("#original").val();
            $('#myTable').paginateTable({ rowsPerPage: totalCount, pager: '.pageNumbersOnly', maxPageNumbers: 4 });
            $('#placeLink').replaceWith("<a href='#' id='clickMeAll'>ViewAll</a>");
        });

        $('#myTable').paginateTable({ rowsPerPage: 5, pager: '.pageNumbersOnly', maxPageNumbers: 4 });
        $('#placeLink').html("<a href='#' id='clickMeAll'>ViewAll</a>");
    });

和#placeLink只是常规<span>

也许有人知道可以推动我走向正确方向的事情？感谢

Answer 1

考虑使用jQuery live。

Answer 2

替换DOM节点没有附加点击事件的问题。当你调用$（“＃clickMeAll”）。点击（...），jQuery会立即搜索一个id为clickMeAll的元素并为其分配一个事件。

如果稍后将其替换为其他一些html代码，则不会自动将该事件重新分配给新的DOM节点。

两种解决方案：

使用jQuery直播活动
不要替换，只需隐藏/显示#clickMeAll和#clickMeRegular。它们都一直存在，但只有一个是可见的。（更好的解决方案）。

Answer 3

$(document).ready(function() {
        var countTotal = $('#myTable tr').length;
        $("#hideTotalCount").val(countTotal);

        $('body').delegate('#clickMeAll', 'click' ,function() {
            var totalCount = $("#hideTotalCount").val() - 1;
            $('#myTable').paginateTable({ rowsPerPage: totalCount, pager: '.pageNumbersOnly', maxPageNumbers: 4 });
            $('#placeLink').replaceWith("<a href='#' id='clickMeRegular'>Back to regular</a>");
        });

        $('body').delegate('#clickMeRegular', 'click' ,function() {

            var totalCount = $("#original").val();
            $('#myTable').paginateTable({ rowsPerPage: totalCount, pager: '.pageNumbersOnly', maxPageNumbers: 4 });
            $('#placeLink').replaceWith("<a href='#' id='clickMeAll'>ViewAll</a>");
        });

        $('#myTable').paginateTable({ rowsPerPage: 5, pager: '.pageNumbersOnly', maxPageNumbers: 4 });
        $('#placeLink').html("<a href='#' id='clickMeAll'>ViewAll</a>");
    });

将正常工作我希望

使用jquery .html（）或.replace（）放置时单击不会工作

3 个答案: