Jquery live replced to on not working

Question

在我的 phonegap 应用程序中，我最初使用了 .live，因为我知道那个已被弃用，所以我切换到了 .on 功能。

使用直播：

$("#addEditForm").live("submit", function(e) {
    var data = {
        firstname: $("#mFirstname").val(),
        lastname: $("#mLastname").val(),
        gender: $("#mGender").val(),
        dob: $("#dob").val(),
        email: $("#mEmail").val(),
        password: $("#mPassword").val(),
        conformPassword: $("#mConformPassword").val(),
        id:$("#mId").val()
    };
    alert(data.firstname);
    e.preventDefault();

使用 ON 时：

$("#addEditForm").on("submit",function(e) {
alert("hi");
    var data = {
        firstname: $("#mFirstname").val(),
        lastname: $("#mLastname").val(),
        gender: $("#mGender").val(),
        dob: $("#dob").val(),
        email: $("#mEmail").val(),
        password: $("#mPassword").val(),
        conformPassword: $("#mConformPassword").val(),
        id: $("#mId").val()
    };
    alert(data.firstname);
    saveDatas(data, "#editPage", function() {
        $.mobile.changePage("index.html", {
            reverse: true
        });
    });
    e.preventDefault();

function saveDatas(details, cb) {
alert(details.firstname);
alert(details.firstname);
if (details.firstname == "") details.firstname = "[No Title]";
**dbShell.transaction(function(tx) {**
    if (details.id == "") {
        tx.executeSql("insert into nameDetail(firstname,lastname,gender,dob,email,password,conformPassword,date) values(?,?,?,?,?,?,?,?)", [details.firstname, details.lastname, details.gender, details.dob, details.email, details.password, details.conformPassword, new Date()]);
    } else {
        tx.executeSql("update nameDetail set firstname=?, lastname=?,gender=?,dob=?,email=?,password=?,conformPassword=?,date=? where id=?", [details.firstname, details.lastname, details.gender, details.dob, details.email, details.password, details.conformPassword, new Date(), details.id]);
    }
}, dbErrHandler, cb);

}

它显示像E/Web Console(23700): Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17 at file:///android_asset/www/js/index.js:51 ** 行这样的异常..

这里

addEditForm is my form id

我的问题是when using the live 警报会起作用并给出我的名字，when using on 警报不显示也尝试 pageshow，pageload 没有成功。

For on function i refer this doc

需要帮助...

Answer 1

试试这个

$(document).on("submit", "#editFormSubmitButton", function(e) {
    alert('Val');
});

Answer 2

使用.on()

由于元素是动态添加的，你不能直接将事件绑定到它们。所以你必须使用Event Delegation。

$(document).on("submit","#addEditForm",function(e) { ..code here.. })

---

$(document).on("click","#editFormSubmitButton",function(e) { ..code here.. })

语法

$( elements ).on( events, selector, data, handler );

Answer 3

当您使用.live() 时，事件将绑定到文档对象。

$(document).on("submit",'#addEditForm', function(e) {
})

Answer 4

在“on submit”功能中，form id 发生了变化，是不是你的问题的原因

Answer 5

.live() 有什么问题

不再推荐使用 .live() 方法，因为更高版本的 jQuery 提供了没有缺点的更好方法。特别是，使用 .live() 会出现以下问题：

jQuery 会在调用 .live() 方法之前尝试检索选择器指定的元素，这在大型文档上可能会很耗时。 不支持链接方法。例如，$(“a”).find(“.offsite, .external”).live( ... );无效且无法按预期工作。 由于所有 .live() 事件都附加在文档元素上，因此事件在处理之前会采用最长和最慢的路径。 在事件处理程序中调用 event.stopPropagation() 对停止附加在文档下方的事件处理程序无效；该事件已经传播到文档。 .live() 方法以令人惊讶的方式与其他事件方法交互，例如，$(document).unbind(“click”) 会删除所有通过调用 .live() 附加的点击处理程序！ .live() 和 .on() 函数的主要区别是什么？

功能：它不是在正文和文档级别上冒泡，而是直接针对文档进行注册。

用法： 如果我们查看 3 种主要事件附加方法，我们会发现它们非常相似。值得注意的是 .live() 没有选择器参数。

$(选择器).live(事件、数据、处理程序); // jQuery 1.3+ $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(document).on(事件、选择器、数据、处理程序); // jQuery 1.7+ 性能：我打算创建一个 jsPerf 测试，但发现有人已经做了艰苦的工作！以下是 .live() 和 .on() 的性能结果。如您所见，.on() 的性能优于它的前身 .live()，几乎快 3 到 4 倍！