如何在工具提示中製作表單？

我想用jQuery製作一個簡單的yes或no的窗體，當你將鼠標懸停在窗體上時，會顯示出來。問題是我似乎無法讓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工具提示形式嗎？如果是這樣，如果沒有，我做錯了什麼，什麼可能是一個副本？謝謝！

來源

2014-06-08 nico

基本上，jQuery UI工具提示HTML不會創建，直到工具提示顯示，所以你試圖綁定提交事件不會觸發，因爲它不附加任何東西。

要將事件綁定到即時創建的元素，請使用'.on（）'方法。所以，你在提交事件看起來應該

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

來源

2014-06-09 00:15:38 Michal

美麗！我很煩惱這個解決方案非常簡單，但我不明白.on，.submit和.click之間的區別。這當然澄清。非常感謝。 – nico

你應該設定在你的提示聲明中open回調。有些事件是由jQuery UI工具提示函數觸發的。因此，您可以將一個函數傳遞給將在工具提示打開時執行的選項。

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

您可以在這一點上設置任何綁定，所以它會實際結合上提交，因爲一旦該事件被觸發將存在形式。

這樣做的好處是綁定只在工具提示處於活動狀態時纔會設置，因此您不會在body標籤上有額外的綁定。

來源

2014-06-09 00:44:20

好的，在我的項目的特定情況下，我在其他地方使用表單（沒有工具提示），因此.on對於我的特定情況更好，但函數的範圍通常更好。感謝您的補充！ – nico

如何在工具提示中製作表單？

回答

相關問題