Question

我想使用jQuery制作一个简单的是或否的表单，当你将鼠标悬停在它上面时会显示。问题是我似乎无法让jQuery承认工具提示的创建，因为它是动态创建的（例如“$（'＃word_form'）。size（）= 0”）并且提交警报不会运行。我单独测试了表单并且它正在工作。这是代码：

HTML：

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<p>
Example 1 : <a href="#" class = "word">Cat</a>
Example 2 : <a href="#" class = "word">Dog</a>
</p>

使用Javascript：

$( document ).ready( function() {
    $(".word").tooltip({
        items: '.word',
        content: '
        <div class="tooltip">Is this word cool?<br> \
            <form id = "word_form" method="POST"> \
                <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/8/87/Symbol_thumbs_up.svg" style="width:50px;height:50px;"> \
                <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/8/84/Symbol_thumbs_down.svg" style="width:50px;height:50px;"> \
            </form> \
        </div>',
        hide: {
            delay: 1000
        }
    });
    $('#word_form').submit(function() {
        alert("Why is this not popping up?");
    });
});

参见Fiddle

是否可以使用jQuery工具提示表单？如果是这样，如果不是，我做错了什么，什么可能是一个变态？谢谢！

Answer 1

基本上，在显示工具提示之前，不会创建jQuery UI工具提示HTML，因此您尝试绑定的提交事件未触发，因为它未附加到任何内容。

要将事件绑定到动态创建的元素，请使用'.on（）'方法。所以你提交的事件应该是那样的

$("body").on("submit", "#word_form", function() {
        alert("Why is this not popping up?");
    });

Answer 2

您应该在工具提示声明中设置open回调。有些事件是由jQuery UI工具提示函数触发的。因此，您可以将函数传递给工具提示打开时将执行的选项。

$(".word").tooltip({
    items: '.word',
    ...
    open: function( event, ui ) {
        $('#word_form').submit(function() {
            alert("This *will* pop up!");
        });
    }
});

您可以在该点设置任何绑定，因此它实际上会在提交时绑定，因为一旦触发该事件，该表单就会存在。

这样做的好处是，绑定仅在工具提示处于活动状态时设置，因此您不会在body标签上有额外的绑定。

如何在工具提示中制作表单？

2 个答案: