选择div中的所有表单并阻止默认操作

时间:2013-01-14 12:14:19

标签: javascript jquery

我希望在暂停时显示我网站的一部分内容。如果用户没有javascript,则停留显示为普通网站。

我的网站位于getController,我的问题出现在handleLinksAndForm

$("#Popup > a").click(function(e){
        e.preventDefault();
        getController($(this).attr("href").substr(1),element);
    });

这是按预期工作的。每当在Popover div中单击Anchor元素时,都会阻止默认操作,并在弹出框中加载新网站。

$("#Popup > form").each(function() {
               alert(this.name);
});
$("#Popup > form").submit(function(e) {
            alert("form");
            e.preventDefault();
            getPostController($(this).attr("action"),$(this).serialize(),element);
            return false;
});

但是,这部分不起作用。既不是foreach部分也不是.submit()。

所以我的问题是:我的错误是什么?如果我使用$("form").each(function() {...所有表单都被识别,但如果我添加额外选择器#Popup则无法识别。

完整代码:

function getController(ctrl,element)
{
    $.get('/service/controller/' + ctrl, function(data){
        handleLinksAndForm(data,element)        
    })
}
function getPostController(ctrl,args,element)
{
    $.post('/service/controller/' + ctrl,args, function(data) {
        handleLinksAndForm(data,element)        
    });
}

function handleLinksAndForm(data,element)
{
    element.html(data);
    element.prepend("<div id=\"popupClose\">x</a>");
    centerPopup();
    $("#popupClose").click(function(){
        disablePopup();
   });
    $("#Popup > a").click(function(e){
        e.preventDefault();
        getController($(this).attr("href").substr(1),element);
    });
    $("#Popup > form").each(function() {
           alert(this.name);
        });
    $("#Popup > form").submit(function(e) {
        alert("form");
        e.preventDefault();
        getPostController($(this).attr("action"),$(this).serialize(),element);
        return false;
    });
}

3 个答案:

答案 0 :(得分:2)

您没有提供任何HTML代码。很难说如果不是这里有更多的问题,例如,如果真的是元素形成#popup的孩子。 但首先尝试使用:

return false;

代替:

e.preventDefault();

您还可以使用: $(“#Popup form”)代替$(“#Popup&gt; form”),这是更安全的方式。

答案 1 :(得分:0)

我刚刚使用下面的代码进行测试,并且能够找到子元素。

$("form", "#Popup").submit(function(e) {
  alert("form");
  ...
});

N.B。这种语法也调用.find(),但在眼睛上稍微容易一些。

答案 2 :(得分:0)

发现我的错误:

我得到了:

<table>
<form>
   <tr><td>...</td></tr>
</form>
</table>

正确的方法是:

<form>
<table>
    ...
</table>
</form>