jQuery-动态加载表单并使用AJAX提交

时间:2018-07-02 00:28:28

标签: jquery ajax

我正在尝试使用.load(url)将表单加载到对话框中,然后在其上启用AJAX提交。它确实将表单加载到对话框中,但是似乎完全忽略了我的jQuery代码,只是在页面刷新时正常提交了。

我在多个站点上使用AJAX代码(不是动态的),并且可以按预期工作。

在这里,我将向您显示代码:

javascript.js;包装成ready()提交动态表单

$("#dbsearch").submit(function(event) {
    alert('click!');
    var data = $("#dbsearch").serialize();
    $.ajax({
        url: 'ajax.php',
        type: 'POST',
            data: data,
            success: function(response) {
                alert(response);
            }
    });

    event.preventDefault();
});

form.php;装入模态

<form method="post" id="dbsearch">
    <div class="form-group col-xs-12 col-md-12">
        <label for="method" class="control-label">Search By</label>
        <select class="form-control" id="method" name="method">
            <option>Choose...</option>
            <option value="content-type">Search By Name</option>
            <option value="release-date">Search By Release Date</option>
        </select>
    </div>
    <div class="form-group col-xs-12 col-md-12">
        <label for="value" class="control-label">Value</label>
        <input type="text" value="" class="form-control" id="value" placeholder="Enter a term...">
    </div>
    <div class="form-group col-xs-12 col-md-12">
        <input type="submit" value="Search" class="btn btn-primary btn-block">
    </div>
</form>

是什么原因造成的?是因为它是动态加载到对话框中的吗?如果是这样,解决该问题的最佳方法是什么?


更新的JS代码

$("#dbsearch").delegate("#dbsearch input[type=submit]", "click", function(event) {
    alert('click!');
    var data = $("#dbsearch").serialize();
    $.ajax({
        url: 'ajax.php',
        type: 'POST',
            data: data,
            success: function(response) {
                alert(response);
            }
    });

    event.preventDefault();
});

2 个答案:

答案 0 :(得分:0)

之所以发生这种情况,是因为您使用的是直接事件处理程序,而不是委托的事件处理程序。事件委托使我们可以将事件侦听器附加到现在或将来存在的元素上。

https://learn.jquery.com/events/event-delegation/

示例(未经测试):

$("#dbsearch").delegate("#dbsearch input[type=submit]", "click", function(event) {
  // Your code here
  event.preventDefault();
});

答案 1 :(得分:0)

您可以使用“ html”方法将代码加载到对话框容器元素中,这将在浏览器中加载js函数。

def partition(lista, inicio, fim):
i = (inicio - 1)
pivot = lista[fim][uf]

for j in range(inicio, fim):
    if lista[j][uf] <= pivot:

        i += 1
        lista[i], lista[j] = lista[j], lista[i]

lista[i + 1], lista[fim] = lista[fim], lista[i + 1]
return (i + 1)


def quickSort(lista,inicio,fim):
    pilha = []
    pilha.append((inicio,fim))

    while pilha:      
        pos = pilha.pop()
        fim, inicio = pos[1], pos[0]
        piv = partition(lista,inicio,fim)

        if piv-1 > inicio:
            pilha.append((inicio,piv-1))

        if piv+1 < fim:
            pilha.append((piv+1,fim))