jquery對動態(tài)加載的li添加click事件，事件無法觸發(fā)

jquery對動態(tài)加載的li添加click事件，事件無法觸發(fā)時設(shè)置出現(xiàn)了問題，解決方法為：

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了扎魯特旗免費建站歡迎大家使用！

1、新建html文件。

2、創(chuàng)建輸入框和按鈕。

3、預(yù)覽效果如圖。

4、接下來需要引入jquery.js。

5、設(shè)置輸入框?keydown 事件和click 事件。

6、按鈕點擊觸發(fā)事件。

7、click按鈕按下效果如圖。

怎么在網(wǎng)頁中通過jQuery動態(tài)加載js代碼

用JQ自帶的AJAX來動態(tài)加載你想要的JS文件

$.getScript("這是你的JS名字.js",?function(){

alert("這是JS加載完了成功的回調(diào)函數(shù)");

});

這是動態(tài)加載的JS文件，ajax必須要有環(huán)境才能運行

jQuery實現(xiàn)列表內(nèi)容的動態(tài)載入特效

采用Jquery實現(xiàn)的列表數(shù)據(jù)動態(tài)更新效果，更新的數(shù)據(jù)可以是ajax請求的數(shù)據(jù)。

CSS:

.main

{

width:

100%;

margin-top:

100px;

text-align:

center;

font-size:

12.5px;

}

th,

td

{

border:

1px

solid

#ccc;

line-height:

40px;

padding-left:

5px;

}

.item:hover

{

background-color:

#efefef;

}

.item:nth-child(2n)

{

background-color:

#efefef;

}

.ListView

{

width:

600px;

overflow:

hidden;

margin:

auto;

padding:

10px;

height:372px;

border:

1px

solid

#dddddd;

}

.ListView

.c

{

width:

1200px;

margin:

auto;

border-collapse:

collapse;

}

.Item

{

border-bottom:

1px

dashed

#dddddd;

padding:

10px

10px

0;

overflow:

hidden;

margin-left:600px;

}

.Item

span

{

float:

left;

text-align:

left;

}

.Item

span:first-child

{

color:

#6AA8E8;

}

.Item

span:last-child

{

text-align:

center;

}

HTML

div

class="main"

div

class="ListView"

div

class="c"

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

div

class="Item"

spantest/span

span男/0/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div

/div

/div

/div

p

style="text-align:center;"a

href="javascript:void(0);"

onClick="ListView.Update();"刷新數(shù)據(jù)/a/p

JS

script

type="text/javascript"

src="/js/jquery-1.8.0.min.js"/script

script

type="text/javascript"

$(function(){

ListView.Init();

});

var

ListView={

Init:function(){

$(".Item

span").css("width",$(".ListView").width()/4+"px");

for(var

i=0;i$(".Item").length;i++){

var

target=$(".Item")[i];

$(target).animate({marginLeft:"0px"},300+i*100);

}

},

Update:function(){

$(".ListView

.c

.Item").remove();

for(var

i=0;i10;i++){

var

newItem=$("div

class=\"Item\"

spantest/span

span男/"+i+"/span

span四川省，成都市，錦江區(qū)/span

span詳細說明/span

/div");

$(newItem).find("span").css("width",$(".ListView").width()/4+"px");

$(".ListView

.c").append(newItem);

$(newItem).animate({marginLeft:"0px"},300+i*100);

}

}

}

/script

附上演示效果

效果是不是非常棒呢，接下來我們再來看看瀑布流的實現(xiàn)思路和js控制動態(tài)加載的代碼

下面的代碼主要是控制滾動條下拉時的加載事件的

在下面代碼說明出，寫上你的操作即可，無論是加載圖片還是加載記錄數(shù)據(jù)

都可以

別忘了引用jquery類庫

$(window).scroll(function

()

{

var

scrollTop

=

$(this).scrollTop();

var

scrollHeight

=

$(document).height();

var

windowHeight

=

$(this).height();

if

(scrollTop

+

windowHeight

==

scrollHeight)

{

//此處是滾動條到底部時候觸發(fā)的事件，在這里寫要加載的數(shù)據(jù)，或者是拉動滾動條的操作

//var

page

=

Number($("#redgiftNextPage").attr('currentpage'))

+

1;

//redgiftList(page);

//$("#redgiftNextPage").attr('currentpage',

page

+

1);

}

});

解析：

判斷滾動條到底部，需要用到DOM的三個屬性值，即scrollTop、clientHeight、scrollHeight。

scrollTop為滾動條在Y軸上的滾動距離。

clientHeight為內(nèi)容可視區(qū)域的高度。

scrollHeight為內(nèi)容可視區(qū)域的高度加上溢出（滾動）的距離。

從這個三個屬性的介紹就可以看出來，滾動條到底部的條件即為scrollTop

+

clientHeight

==

scrollHeight。（兼容不同的瀏覽器）。

如何使用jquery動態(tài)加載js，css文件

一、Jquery動態(tài)加載Js和Css擴展方法

$.extend({

includePath: '',

include: function(file) {

var files = typeof file == "string" ? [file]:file;

for (var i = 0; i files.length; i++) {

var name = files[i].replace(/^\s|\s$/g, "");

var att = name.split('.');

var ext = att[att.length - 1].toLowerCase();

var isCSS = ext == "css";

var tag = isCSS ? "link" : "script";

var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";

var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";

if ($(tag + "[" + link + "]").length == 0) document.write("" + tag + attr + link + "/" + tag + "");

}

}

});

二、使用方法：

$.include('dedeajax.js');

$.include('android.css');

或者：

$.includePath='www/html/';

$.include([dedeajax.js','android.css']);

jQuery動態(tài)加載html

詳細介紹：

在當(dāng)前html里寫如下js：

$("#div1").load("test.html #div1");//把test.html里面id為div1的加載到當(dāng)前頁的div1

$("#div2").load("test.html #div2");//把test.html里面id為div2的加載到當(dāng)前頁的div2

本文標(biāo)題：jquery動態(tài)加載,jquery動態(tài)加載html
文章起源：http://jinyejixie.com/article2/hojgoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、面包屑導(dǎo)航、、網(wǎng)站設(shè)計、網(wǎng)站改版、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)