Question

我在主页(index.php)中有一个jquery ui按钮，它出现并且工作正常。在主页面中，我有一个div <div id="cardarea">，我将其用作动态内容的占位符。动态内容存储在另一个文件(cardarea.php)中，并显示此文件中的元素，具体取决于它从主页面中的输入表单中获取的$_GET['key'];变量。

现在的问题是，当我尝试在文件<settingsbtn>的部分内容中包含相同的jquery ui按钮（cardarea.php）时，这不会显示。

javascript代码和定义包含在index.php的标头中。我想文件cardarea.php中的按钮无法获取此信息，或者我的javascript定义中存在错误。我已经尝试在文件cardarea.php中包含相同的JavaScript代码和定义，但没有效果。

我真的完全不知道这里有什么问题。我将包含javascript定义，但我不确定其他代码可能与解决这个问题有关。如果适用，请告诉我哪些其他信息可能对查找问题有用。感谢。

使用Javascript：

    $(function() {

$( "settingsbtn" ).button({
        icons: {
                    primary: "ui-icon-triangle-1-s"
                },
        text: false
});

}); 

</script>

的index.php

<?php


include 'functions.php';
include 'incl_ajax.php';


?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/amariffic.css" rel="stylesheet" type="text/css" />
<title>Test</title>


    <link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.js"></script>

    <?php include 'snip_javascript.php'; // innholder både kode og css-link. ?>

</head>



<body class="body">

<settingsbtn></settingsbtn>

<a href="javascript:ajaxpage('_cardarea.php?key=5', '_cardarea');" class='nodecor'>Show</a>

<div id="_cardarea"></div> 

</body>
</html>

CARDAREA.PHP

<?php

include 'functions.php';
$key = $_GET['key']; 


    if ($key == '5') {
        echo '<div>';
        echo 'Button: <settingsbtn> </settingsbtn>';
        echo '</div>';
    }

?>

Answer 1

完成AJAX请求后，您必须再次运行已编写的Javascript函数。

你必须再次运行你的功能：

$(function() {

$( "settingsbtn" ).button({
        icons: {
                    primary: "ui-icon-triangle-1-s"
                },
        text: false
});

});

我在AJAX通话后实际在我的Chrome控制台中运行了该功能，并且第二个按钮已正确显示。

只需在javascript函数中定义：

function initButtons(){
   $( "settingsbtn" ).button({
           icons: {
                       primary: "ui-icon-triangle-1-s"
                  },
           text: false
   });
}

然后用以下内容覆盖您以前粘贴的javascript代码：

initButtons();

最后，您必须将此函数调用添加到AJAX回调函数的末尾：

initButtons();

在您将从AJAX接收的代码附加到HTML的指令之后立即放置。

编辑：我查看了你的代码，我看到你应该把这个功能放在这里：

function ajaxpage(url, containerid){
[...]
   page_request.onreadystatechange=function(){
   loadpage(page_request, containerid)
   initButtons();
   }
[..]
}

Answer 2

或许delegate()正是您所寻找的。

jjery ui按钮在ajax调用后不出现

2 个答案: