2

好吧，我已经坚持了一段时间了......

基本上我有两种方法希望显示某个 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框里面有两张图片，可以点击，但是不执行点击动作。

这是替换后不工作的一段代码：

//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 相当陌生，并且已经做了尽可能多的研究，但似乎我只是在绕圈子。任何人都可以帮忙吗？

4

2 回答 2

6

您正在动态创建元素，您需要使用事件委托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);
    });
于 2013-05-06T00:46:05.107 回答
2

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

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

编辑

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

相反，尝试这样的事情：

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

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

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

于 2013-05-06T00:33:48.667 回答