php - jquery ui按钮在ajax调用后不出现

标签 php javascript jquery ajax jquery-ui

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

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

javascript代码和定义包含在 index.php 的 header 中。我猜是文件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>';
    }

?>

最佳答案

完成 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();
   }
[..]
}

关于php - jquery ui按钮在ajax调用后不出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16819832/

相关文章:

javascript - 如何从 parent 的 sibling 中删除类(class)

javascript - 复选框更改事件未触发

javascript - 将 text.json 解析为 jquery.animation?

php - 在 php 中解析配置文件的算法(Doxygen 文件)

php - MySQL SELECT NOW() 和 PHP date ('Y-m-d H:i:s' ) 不同

javascript - 为什么 d3 在应用链接力后说某些节点丢失?

javascript - 如何使用 Node js Express 渲染 View 模板

javascript - 打印时缺少图像

php - Jquery ajax 调用 : can't use numbers

php - 使用 Windows 身份验证作为 Intranet 应用程序的登录凭据