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

我想在中途停留时显示我网站的一部分。如果用户没有javascript，则显示为普通网站

我正在使用

getController

获取网站，我的问题出现在

handleLinksAndForm

中

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

这正是我们想要的。每当单击Popover div中的锚元素时，就会阻止默认操作，并在Popover中加载新网站

$("#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;
    });
}

函数getController（ctrl，元素） { $.get（'/service/controller/'+ctrl，函数（数据）{ handleLinksAndForm（数据、元素） }) } 函数getPostController（ctrl、args、element） { $.post（'/service/controller/'+ctrl，args，函数（数据）{ handleLinksAndForm（数据、元素） }); } 函数handleLinksAndForm（数据、元素） { html（数据）； 元素。前置（“x”）； centerPopup（）； $（“#弹出关闭”）。单击（函数（）{ 禁用弹出窗口（）； }); $（“#弹出窗口>a”）。单击（函数（e）{ e、 预防默认值（）； getController（$（this.attr（“href”）.substr（1），元素）； }); $（“#Popup>form”）。每个（函数（）{ 警报（此名称）； }); $（“#弹出窗口>表格”）。提交（功能（e）{ 警报（“表格”）； e、 预防默认值（）； getPostController（$（this.attr（“action”），$（this.serialize（），元素）； 返回false； }); }

---

我刚刚用下面的代码进行了测试，我能够找到子元素

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

---

注意：此语法也调用.find（），但看起来稍微容易一些。

您没有提供任何html代码。很难说这里是否没有更多问题，例如，if是真正的元素，它是#popup的子元素。 但首先尝试使用：

return false;

相反：

e.preventDefault();

您还可以使用： $（“#弹出式窗体”）而不是$（“#弹出式窗体”），这是一种更安全的方式。

发现了我的错误：

我得到：

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

...

正确的方法是：

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

...

您确定目标表单是#Popup的直接子元素吗？发布相关HTML如何？您是否可以发布一些原始HTML以使图片更清晰，似乎您正在阻止子元素上的默认操作，该操作无法在父操作（即表单）处触发。并且不要使用

preventDefault（）

和

一起返回false

谢谢你的努力，但是我发现了我的错误，它与HTML有关。检查我自己的答案谢谢。我会使用它。

返回false

实际调用

preventDefault（）

和

stopPropagation（）

如果我们没有使用正确的选择器，这将导致未来的锚定标记的行为出人意料。如果只是取消操作的默认行为，您应该始终选择

preventDefault（）

，这也是有意义的。