Question

好的，我现在已经坚持了一段时间......

基本上我有两种方法可以显示某个div。我计划使用replaceWith（）替换#mainDiv与另一个版本的#mainDiv来创建一个函数。

这是功能：

function switchToChoice(){
            $('#myCanvas2').replaceWith('<div id="yesBox" width="150" height="90"><img id="yes" src="Yes-Button.png" width="110" height="55"></div><div id="noBox" width="150" height="90"><img id="no" class src="No-Button.png" width="110" height="55"></div>');

        }

这可以在调用时创建我想要的div框。 div框中有两个图像，可以单击，但不执行单击操作。

这是在replaceWith之后无效的代码：

//If the user presses the Next button on the comment pages.
        $('#next').click(function() {
            $('#next').fadeTo(100, 0.25, function(){
                clearCanvas(ctx, c);
                wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
                textPos++;
            });
            switchToChoice();
            $('#next').fadeTo(100, 1);
        });

        //If the user presses the Yes button on the question pages.
        $('#yes').click(function() {
            alert("boobs");
            $('#yes').fadeTo(100, 0.25, function(){
                clearCanvas(ctx, c);
                wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
                textPos++;
            });
            $('#yes').fadeTo(100, 1);
        });

        //If the user presses the No button on the question pages.
        $('#no').click(function() {
            $('#no').fadeTo(100, 0.25, function(){
                clearCanvas(ctx, c);
                wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
                textPos++;
            });
            $('#no').fadeTo(100, 1);
        });

我的猜测是，当替换HTML时会丢失一些东西，但我真的不知道是什么。我对JQuery相当陌生并尽可能多地进行研究，但似乎我只是在圈子里。有人可以帮忙吗？

Answer 1

您正在动态创建元素，您需要使用on使用事件委派。

您的活动将仅附加到当时DOM中存在的元素。因此，您需要通过将事件附加到文档或任何时间点存在的父元素来使用Delegated事件。您可以使用on()

执行此操作

     $(document).on('click', '#next', function() {
        $(this).fadeTo(100, 0.25, function(){
            clearCanvas(ctx, c);
            wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
            textPos++;
        });
        switchToChoice();
        $(this).fadeTo(100, 1);
    });

    //If the user presses the Yes button on the question pages.
    $(document).on('click','#yes', function() {
        alert("boobs");
        $(this).fadeTo(100, 0.25, function(){
            clearCanvas(ctx, c);
            wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
            textPos++;
        });
        $(this).fadeTo(100, 1);
    });

    //If the user presses the No button on the question pages.
     $(document).on('click','#no', function() {
        $(this).fadeTo(100, 0.25, function(){
            clearCanvas(ctx, c);
            wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
            textPos++;
        });
        $(this).fadeTo(100, 1);
    });

Answer 2

你是对的，当你替换html时，事件就会被破坏。

当我看看你要替换它的时候，没有#next事件的元素。你有yesBox，yes，noBox和no的id，但是没有下一个。这意味着您不会点击符合条件的任何内容。

修改

由于您尝试访问的#yes和#no框在替换HTML之后才存在，因此事件无法以您尝试的方式绑定到它们。

相反，尝试这样的事情：

$('#myCanvas').on('click', '#yes', function(){})

这实际上将事件绑定到myCanvas div，但是只会触发id为yes的子元素（on函数的第二个参数）。

这样事件就被绑定到了div，即使在替换HTML之后它仍然存在。

使用replaceWith后，.click停止工作

2 个答案: