欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法分析

 更新時(shí)間:2018年01月02日 11:46:18   作者:楓葉流丹  
這篇文章主要介紹了jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法,結(jié)合實(shí)例形式分析了動(dòng)態(tài)添加元素?zé)o法綁定事件的原因與相關(guān)解決方法,需要的朋友可以參考下

本文實(shí)例講述了jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法。分享給大家供大家參考,具體如下:

最近遇到一個(gè)問題,即當(dāng)用jquery動(dòng)態(tài)添加元素后,發(fā)現(xiàn)給動(dòng)態(tài)添加的元素卻無法觸發(fā)事件。后來在網(wǎng)上查閱了一些資料,發(fā)現(xiàn)原來要這樣處理:

先上我出錯(cuò)的代碼:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet"  rel="external nofollow" >
  <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
//這里是動(dòng)態(tài)添加元素
      $(".add").click(function(){
        var btn = $("<button class='newBtn btn btn-default'>新按鈕</button>");
        $("body").append(btn);
      })<br><br>//這里是為添加的元素添加事件
      $(".newBtn").click(function(){
        alert("這里是新添加的元素觸發(fā)的事件");
      })
    })
  </script>
</head>
<body>
<button class=" add btn btn-default">添加按鈕</button>
</body>
</html>

奉上我的解決方法

方法一:綁定live事件(live事件只在jquery1.9以下才支持,高版本不支持)。

$(".newBtn").live("click",function(){
///jquery 1.9(不包括1.9)以下可以
  alert('這里是動(dòng)態(tài)元素添加的事件');
})

方法二:利用on()事件綁定($(ParentEle).on("click",".thisEle",function(){})

$("body").on("click", ".newBtn", function() {
   alert('這里是動(dòng)態(tài)元素添加的事件');
});
//這里的ParentEle是 thisEle的父輩元素或者祖先元素,ParentEle可以是document,也可以是body等。
//注意:如果此時(shí)調(diào)用的函數(shù)是外部定義好的函數(shù),那在調(diào)用的時(shí)候不要加(),不然會(huì)跳過點(diǎn)擊事件直接觸發(fā)函數(shù)

$("body").on("click", ".newBtn",aa );
function aa(){
    alert('這里是動(dòng)態(tài)元素添加的事件');
}

ok,問題解決,繼續(xù)爬坑。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單驗(yàn)證實(shí)例

    jquery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單驗(yàn)證實(shí)例

    下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單驗(yàn)證實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-03-03
  • jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼

    jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼

    有時(shí)候我們需要讀取JSON格式的數(shù)據(jù)文件,在jQuery中可以使用Ajax或者 $.getJSON()方法實(shí)現(xiàn),下面有個(gè)不錯(cuò)的示例,需要的朋友可以參考下
    2013-11-11
  • Jquery中擴(kuò)展方法extend使用技巧

    Jquery中擴(kuò)展方法extend使用技巧

    extend是常用的參數(shù)處理函數(shù),特別是對(duì)默認(rèn)值的使用,但是在使用過程中,默認(rèn)值往往是不能被改變的,需要的朋友可以參考下
    2014-08-08
  • jQuery遍歷節(jié)點(diǎn)元素方法介紹

    jQuery遍歷節(jié)點(diǎn)元素方法介紹

    這篇文章介紹了jQuery遍歷節(jié)點(diǎn)元素的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-03-03
  • SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實(shí)現(xiàn)的

    SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實(shí)現(xiàn)的

    json作為一種輕量級(jí)的數(shù)據(jù)交換格式,在前后臺(tái)數(shù)據(jù)交換中占據(jù)著非常重要的地位。Json的語法非常簡(jiǎn)單,采用的是鍵值對(duì)表示形式,本文給大家介紹SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實(shí)現(xiàn)的,對(duì)spring mvc ajax json相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12
  • jQuery標(biāo)簽編輯插件Tagit使用指南

    jQuery標(biāo)簽編輯插件Tagit使用指南

    jQuery 的 tagit 插件效果還是不錯(cuò)的,今天用到該插件,下面給大家詳細(xì)講解下此插件的具體用法。這里推薦給大家,有需要的小伙伴可以參考下。
    2015-04-04
  • 刪除select中所有option選項(xiàng)jquery代碼

    刪除select中所有option選項(xiàng)jquery代碼

    select中所有option選項(xiàng)如何刪除,本文使用jquery簡(jiǎn)單實(shí)現(xiàn)下,有此需求的朋友可以參考下,希望對(duì)大家有所幫助
    2013-08-08
  • 基于jquery的bankInput銀行卡賬號(hào)格式化

    基于jquery的bankInput銀行卡賬號(hào)格式化

    jquery bankInput插件是銀行卡進(jìn)行格式化顯示,能控制文本框輸入最小最大個(gè)數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時(shí)插件能實(shí)現(xiàn)自動(dòng)加載格式化顯示和支持非輸入框的格式話顯示
    2012-08-08
  • jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程

    jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程

    jQuery Mobile中的button默認(rèn)提供了很多用于制作移動(dòng)Web頁面按鈕的屬性,這里我們來整理一下jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程,需要的朋友可以參考下
    2016-05-05
  • 基于jquery的圖片的切換(以數(shù)字的形式)

    基于jquery的圖片的切換(以數(shù)字的形式)

    圖片的切換時(shí)一個(gè)常用的功能。下面實(shí)現(xiàn)的是一個(gè)點(diǎn)擊數(shù)字來進(jìn)行圖片的切換。學(xué)習(xí)jquery的朋友可以參考下原理。
    2011-02-02

最新評(píng)論