Question

（简化）场景：远程MySql DB和带有2个按钮的HTML页面：SHOW和SELECT。 SHOW加载单个记录并在表单中显示字段。

这一切都很好。

SELECT是用我的新方法制作的：
我将一个参数传递给PHP函数来查询数据库并创建一个带有结果的html文件此文件是要在DIV中插入的一系列<UL><LI><a id="1"...data..</LI></UL> 其中一个<LI>包含一个链接，单击该链接时会调用SHOW函数。记录标识是通过与锚点相关联的ID来进行的。

此程序正常;我得到了新的HTML段（我可以在远程Web服务器上查看）它插入（???）在我的DIV中，内容在屏幕上正确显示，但是......它不存在。

单击链接不会激活SHOW过程（实际上，从不显示具有呼叫ID的警报）。
从Mozilla查看html页面源代码，它仍然显示以前的内容，没有新添加（或替换）的代码。

这就是这篇文章的标题：我看到的东西确实不存在。
可能，我应该让AJAX来刷新＆＃39;它对DOM的可见性，但不明白如何。

这是我用来获取新内容的JQuery脚本：

$("#select").click(function() { 
    $.ajax({ 
        url: "new_record_list.php",
        cache: false,
        success: 
            function(recNumber)
            {
                $("#selected").val(recNumber); //ok
                $("#recordList").load("list.txt"); //'list.txt is created by new_record_list.php
                alert($("#recordList").html()); //this is OK
            }
    });
});

一切都好，但肉在哪里？

Answer 1

您创建的侦听器很可能没有附加到新的dom节点。您可以通过将侦听器附加到创建页面时存在的父元素甚至文档来解决此问题：

$(document).on('click', '.show', function() {
  //click event
});

将“.show”替换为链接的jquery选择器

Answer 2

由于代表：

，我无法评论您的新帖子

删除loadRecord函数中的click事件处理程序。

点击事件已经绑定在脚本的顶部。发生的情况是，您单击，激活加载记录功能，该功能绑定新的点击处理程序，触发对其后的所有点击操作。

加载记录应该是这样的：

function loadRecord(){     
        ind = $(this).attr("id");
        $("#thisRecord").val(ind); //shows the clicked record

        $.get("show_record.php",{id:ind}, function(gotString) 
        {
            ptr=0; //used to fetch fields
            pos=0;
            lun = gotString.length;
            if (lun==0) {
                alert ("Empty string!");
                return false;
            };

// fetch received keys and values then fills the fields                                             
            while (ptr < lun) {
            ..... //not interesting here            
            }; //while

        });                                                                                 
        return false;   //required!

};

此外，您应该替换

$(document).on('click', '.compLink', function() {
  loadRecord();
});

带

$(document).on('click', '.compLink', loadRecord);

并且loadRecord将作为参数传递鼠标事件。 $（this）也将引用您在loadrecord函数中单击的链接。否则，您需要将单击的元素传递给该函数。

Answer 3

我可以立即看到的一个问题是AJAX调用，它应该符合以下几行：

$( "#select" ).on( "click", function ()
{
    $.ajax( {
        url: "new_record_list.php?record=MY_RECORD_VALUE",
        type: "GET",
        success: function ( response )
        {
            $( "#selected" ).val( response );
            $( "#recordList" ).html( function ()
            {
                $.ajax( {
                    url: "list.txt",
                    typ: "GET",
                    success: function ( response2 )
                    {
                        $( "#recordList" ).html( response2 );
                    }
                } );
            } );
            alert( $( "#recordList" ).val() );
        },
        beforeSend: function()
        {
            $( "#recordlist" ).html( "Loading..." );
            $( "#selected" ).val( "Loading..." );
        }
    } );
} );

这会从您所做的$.ajax来电中获得更好的结果。

.load()方法有时可能非常不可靠，因此为什么（IMO）更好地在ajax中制作ajax，因为这是你用有效控制较少的方式做的事情。

你已经完成了function(recNumber)有点不对，我担心，从AJAX调用中带回来的是响应，如果你将它作为一个实际的页面使用它，那将会显示出来的一切，例如：如果你有：

    <table>
        <tr>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
        </tr>
    </table>

    <input id="id_valued" value="2" />

然后将返回整个事物，而不仅仅是id_valued输入字段。

Answer 4

我按照 Erin 的提示加上此论坛上的其他建议，现在程序 ALMOST 正常工作。
实际上它确实如此，但是当加载一组新记录时，要更新显示（即调用loadRecord函数），必须在链接上单击两次，这是第一次。所有下一次点击立即做出反应。

我尝试发布整个脚本，让专家看看我几乎没做过：

<script type="text/javascript">
$(document).ready(function()
{
    $(document).foundation();

  var $scrollbar = $("#scrollbar1"); //other stuff
  $scrollbar.tinyscrollbar();

    //Erin suggestion + my understanding
    $(document).on('click', '.compLink', function() {
      loadRecord();
    });



/* =========== ADD Rows ============================== */
/* action called by hitting the "selectRow" button.
/* query the DB and get a list of rows (5 fields each)
/* that are then inserted into the '#recordList' DIV.
/* Each rows has format:
/* <UL><LI><A id="xxx" class="compLink" ...>item xxx</A></LI><LI>....</LI></UL>
*/

    $("#selectRow").on( "click",function()
     {
        $.ajax(
        { 
            url: "new_record_list.php",
            type: "GET",
            success: function(recNumber) //if ok, we get the number of records
            {
                $("#selectedRecords").val(recNumber);   //show how many records we got

                        $("#recordList").load("newRecords.txt"); //loads the remote text file into the DIV

                    }

            });

    }); 
/* ====================================================== */



/* =========== LOAD Record ============================== */
/* loads and displays an entire record from DB, 
/* based on the ID of clicked link with class="compLink"
/* in '#recordList' DIV.
/* Example: <a id="1" class="compLink" ...>
*/
 function loadRecord(){
    $(".compLink").click(function(event)  
        {           
            ind = $(this).attr("id");
            $("#thisRecord").val(ind); //shows the clicked record

            $.get("show_record.php",{id:ind}, function(gotString) 
            {
                ptr=0; //used to fetch fields
                pos=0;
                lun = gotString.length;
                if (lun==0) {
                    alert ("Empty string!");
                    return false;
                };

// fetch received keys and values then fills the fields                                             
                while (ptr < lun) {
                ..... //not interesting here            
                }; //while

            });                                                                                 
            return false;   //required!

        }); 
    };  
/* ====================================================== */




    return false;                              
});

</script>

我希望这很清楚。感谢

我看到的不是我得到的

4 个答案: