jquery - jQuery：如何对后端进行 ajax 调用，而不是在单击按钮时提交表单？

Question

我在这里有一个 jsfiddle：http: //jsfiddle.net/rDe9V/

重现步骤 ：

1. 在文本框中输入
2. 单击“添加到播放列表”并在文本框中添加一些文本
3. 点击“新建”

警告框似乎不起作用。相关的jQuery函数在这里

$(function() {
    $('form input[type="text"]').live('keyup', function() {
        var val = $.trim(this.value);
        $('form .create-playlist-button').prop('disabled', val.length == 0)
    });
    $('form .create-playlist-button').click(function(e) {
        var title = $(e.target).closest('.video-detail').find('.title').text();
        alert(title);
    });
});

请帮助理解为什么这不起作用。

---

更新

所以不允许每天问超过 6 个问题。所以我在这里更新

我对小提琴进行了更改，现在就在这里-http: //jsfiddle.net/rDe9V/2/

   $('form input[type="text"]').live('keyup', function() {
        var val = $.trim(this.value);
        $('form .create-playlist-button').prop('disabled', val.length == 0).click(function(e){
            var title = $(e.target).closest('.video-detail').find('.title').text();
            alert(title);
        });
    }); 

需要

• 单击按钮时，不应发布表单

---

Answer 1

“新建”按钮正在提交表单。

您必须终止提交该表单的事件，否则它将被提交并且您的页面将自行刷新，发布（或获取）表单数据。

Answer 2

您的点击事件未注册，您应该将按钮定义为按钮而不是提交。

var clickAdded = false;

// creating new playlist
$(function() {
        $('form input[type="text"]').live('keyup', function() {
            var val = $.trim(this.value);
            $('form .create-playlist-button').prop('disabled', val.length == 0);
            if (val.length > 0 && !clickAdded) {
                $('form .create-playlist-button').click(function(e){
                     var title = $(e.target).closest('.video-detail').find('.title').text();
                     alert(title); return false;
                 });
                clickAdded = true;
            }

        });});