ajax调用后没有出现jquery ui按钮答案

【问题标题】：jquery ui button not appearing after ajax callajax调用后没有出现jquery ui按钮
【发布时间】：2013-05-25 01:32:31
【问题描述】：

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

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

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>';
    }

?>

【问题讨论】：

你能显示你的html源代码吗？
为什么不直接用css设置按钮背景或者只用IMG标签？
我现在已经添加了代码。另请参阅bryggelogg.vinterstum.no/_index.php 以了解上述代码的问题清单。

标签： php javascript jquery ajax jquery-ui

【解决方案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();
   }
[..]
}

【讨论】：

这听起来很合理，但与在控制台中相比，您对如何将其放入代码中有何建议？
谢谢！看起来这解决了我的主要问题。（我现在唯一想知道的是，第二个按钮似乎过了一会儿就消失了，但至少这是另一个问题......）
实际上，我正在尝试加载您的网站，但它给了我这个错误：Uncaught ReferenceError: injection is not defined
哦，是的，我的错。现在应该修复了。
我弄错了。您必须在我的解决方案中将 initJs() 或 initButtons() 放在 AJAX 回调函数的末尾。当 AJAX 调用完成并将服务器文本附加到 HTML 后，立即调用 initJS() 函数。

【解决方案2】：

也许delegate() 就是你要找的。p>

【讨论】：