0

我知道这已经被问了一段时间，但之前的解决方案没有帮助，我不明白我是否遗漏了什么

我有一个带有 index.php 的简单 php/hmtl 页面，其中我通过简单的 GET 检查包含了不同的内容 php 页面：

if (isset($_GET['section'], $section[$_GET['section']])) {
    include $section[$_GET['section']];
} else {
    include $section['home'];
}

现在其中一个部分包含一个表单，我想用它做一些神奇的 ajax/jquery 操作。

在我加载在 index.php 底部的 javascript 文件中，我有以下 jquery ajax 内容

//ajax load domain search script
$(document).ready(function(){
    $('#lookup_domain').live("click", function(e) {
        e.preventDefault();
        searchVal = $('#domain').val();
        topLevel = $('.custom_select').val();
        domain = searchVal + '.' + topLevel;
        $.ajax({
            type: 'GET',
            url: 'script_domain.php',
            data: 'domain=' + domain,
            dataType: 'html',
            beforeSend: function() {
                $('#result').html('<img style="margin-left: 80px;margin-top: 30px;" src="_assets/img/loader.gif" alt="loading..." />');
                if (!searchVal[0]) {
                    $('#result').html('<p>Syötä domain nimi.</p>');     
                    return false;
                }   
            },
            success: function(response) {
                $('#result').html(response);

            },
            error: function(response) {
                $('#result').html('<p>Haussa virheitä.</p>');
            }
        });
    });
});

我认为这足以使用

$(document).ready(function(){

和 live 方法（我有 jquery 1.7.1 所以 live 应该可以工作吗？）

$('#lookup_domain').live("click", function() {

但不幸的是，这不起作用，表单只是将其发送给自己并再次加载页面。

这是表格：

<?php
if(!defined('indexcalled')){die('Direct access not premitted');}
?>
            <div id="domain_search">
                <h5>hae verkkotunnusta</h5>
                <form action="#" method="get" class="domain_form">
                    <input type="text" name="domain" class="domain_input" />
                    <div class="select_wrap">
                        <select class="custom_select">
                            <option value="fi">.FI</option>
                            <option value="com">.COM</option>
                            <option value="net">.NET</option>
                            <option value="me">.ME</option>
                            <option value="info">.INFO</option>
                        </select>
                    </div><!--/select wrap-->
                    <input type="submit" value="Syötä" class="domain_submit_btn" id="lookup_domain"/>
                </form>
                <div class="clear"></div>
            </div><!--/domain search-->

我在这里想念什么？有没有关于如何在这种动态页面设置中使用 jquery 的好的文档？

编辑

我最初的问题是，如何使用 jquery 正确处理这些元素，因为它们稍后会包含在内。

我发现我应该使用 on() 而不是 live，因为它在 1.7 中也已弃用。所以我编辑了这样的代码：

$(document.body).on("click", '#lookup_domain', function(e){
    e.preventDefault();
    $(document.body).on("click", '#domain', function(event){
        alert($(this).text());
    });

但是警报不起作用，它什么也没做。我在这里想念什么？

4

3 回答 3

2

您正在调用e.preventDefault()，这应该阻止表单提交，但是您没有将事件对象传递给您的点击处理程序。将其更新为此，它应该可以工作：

$('#lookup_domain').live("click", function(e) {
        e.preventDefault();
        ...
});
于 2013-07-08T17:24:21.160 回答
1

因为您使用提交按钮进行实时点击，所以您需要禁用表单提交。

有两种解决方案：

1、点击事件返回false：

$('#lookup_domain').live("click", function() {
    // all of your code
    return false;
})

2、在表单中添加一个 onsubmit 属性：

<form action="#" method="get" class="domain_form" onsubmit="return false;">

</form>
于 2013-07-08T17:22:44.930 回答
0

感谢所有在聊天中帮助我的人，正确的方法是首先准备好文档，然后使用带有 click 方法的 .on() 来访问之后创建的元素。然后只需使用普通的 .val() 来获取值，如下所示：

$(document).ready(function(){
    $(document.body).on("click", '#lookup_domain', function(e){
        e.preventDefault();
        searchVal = $('#domain').val();
于 2013-07-10T13:16:18.780 回答