ajax中content,如何在Ajax加载的Content上绑定事件?

我有一个链接,该链接myLink应该将AJAX加载的内容插入divHTML页面的(appendContainer)。问题是click我绑定到jQuery 的事件未在插入到appendedContainer中的新加载的内容上执行。该click事件绑定到未随我的AJAX函数加载的DOM元素上。

我必须更改什么才能绑定事件?

我的HTML:

Load Ajax

我的JavaScript:

$(".LoadFromAjax").on("click", function(event) {

event.preventDefault();

var url = $(this).attr("href"),

appendedContainer = $(".appendedContainer");

$.ajax({

url: url,

type : 'get',

complete : function( qXHR, textStatus ) {

if (textStatus === 'success') {

var data = qXHR.responseText

appendedContainer.hide();

appendedContainer.append(data);

appendedContainer.fadeIn();

}

}

});

});

$(".mylink").on("click", function(event) { alert("new link clicked!");});

要加载的内容:

some content

如何在Ajax加载的Content上绑定事件?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用ajax和后端交互的示例代码,并带有详细注释: HTML代码: ```html <!DOCTYPE html> <html> <head> <title>AJAX Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- 引入jQuery库 --> </head> <body> <button id="myButton">Click Me</button> <!-- 点击按钮触发ajax请求 --> <div id="myDiv"></div> <!-- 显示ajax返回的数据 --> <script> $(document).ready(function(){ // 当文档完毕后执行 $("#myButton").click(function(){ // 当按钮被点击时执行 $.ajax({ // 使用ajax发送请求 url: "backend.php", // 请求的URL data: {name: "John", age: 30}, // 请求的参数,可以是对象、数组或字符串 type: "POST", // 请求的方法,可以是GET或POST dataType: "json", // 返回的数据类型,可以是text、html、xml、json、script等 success: function(result){ // 请求成功后执行的回调函数 $("#myDiv").html(result.message); // 在页面上显示返回的数据 }, error: function(xhr, status, error){ // 请求失败后执行的回调函数 console.log(xhr.responseText); // 打印错误信息到控制台 } }); }); }); </script> </body> </html> ``` backend.php代码: ```php <?php $name = $_POST["name"]; // 获取请求的参数 $age = $_POST["age"]; $response = array("message" => "Hello, " . $name . "! You are " . $age . " years old."); // 构造返回的数据 header("Content-Type: application/json"); // 声明返回的数据类型是json echo json_encode($response); // 返回json格式的数据 ?> ``` 注释: 1. 在HTML代码,使用jQuery库引入了ajax的相关方法。 2. 当页面完毕后,给“Click Me”按钮了一个点击事件,当按钮被点击时会触发ajax请求。 3. 使用ajax发送请求的相关参数,包括请求的URL、请求的参数、请求的方法、返回的数据类型等等。 4. 在请求成功后,会执行一个回调函数,将返回的数据显示在页面上。 5. 在请求失败后,会执行一个回调函数,将错误信息打印到控制台上。 6. 在backend.php代码,获取了请求的参数,并构造了返回的数据。 7. 声明返回的数据类型是json,并将数据以json格式返回。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值