Backend Development
PHP Tutorial
javascript - click event failure problem after ajax request data in js
javascript - click event failure problem after ajax request data in js
Jul 06, 2016 pm 01:52 PM
I have a data list with a click-to-expand effect. Since this data list uses ajax loading, the ajax time after click loading does not work. I hope you can help me take a look.
This is the data structure and page layout in html
<code><div class="con-list">
<div class="list-data">
<div class="list-data-detail">
<p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
<p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1603">展開(kāi)</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
<p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1621">展開(kāi)</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
<p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1625">展開(kāi)</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
<p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1633">展開(kāi)</a></p>
</div>
</div>
<div class="list-data html-hide"></div>
</div></code>
The expansion event and js request in clickajax are as follows
<code><script>
;(function($){
//打開(kāi)
$('.open-detail').click(function(){
$(this).parent().siblings('p[class="no-open"]').addClass('yes-open');
$(this).text('收起');
$(this).attr('class', 'close-detail');
});
//收起
$('.close-detail').click(function(){
$(this).parent().siblings('p[class="yes-open"]').addClass('no-open');
$(this).text('展開(kāi)');
$(this).attr('class', 'open-detail');
});
//
});
function getAjaxList(_v, _c, _t){
$.ajax({
url : './ajax.php?op='+_v,
type : 'post',
dataType : 'json',
data : {'category':_c, 'template':_t},
success : function(msg){
if(msg.status == 1){
$('.html-hide').html(msg.html);
$('.html-hide').siblings('div').hide();
$('.html-hide').show();
} else {
$('.list-data').html('此處無(wú)您要的信息，到最新動(dòng)態(tài)去看看吧');
}
}
});
}
</script></code>
Settings and data settingsphp in div
<code><?php
...
...
...
foreach ($variable as $key => $value) {
$html .='<div class="list-data-detail">';
$html .='<p class="no-open">'.$value['desc'].'<p>';
$html .='<p><span>時(shí)間：'.date('Y-m-d', $value['updateTime']).'</span> | <span>來(lái)源：'.$value['author'].'</span> <a href="javascript:(0)" class="open-detail" data-id="'.$value['aid'].'">展開(kāi)</a></p>';
$html .='</div>';
}
$result['html'] = $html;
exit(json_encode($result));</code>
I added all the styles in php and div! But it just doesn't work.
Reply content:
I have a data list with a click-to-expand effect. Since this data list uses ajax loading, the ajax time after click loading does not work. I hope you can help me take a look.
This is the data structure and page layout in html
<code><div class="con-list">
<div class="list-data">
<div class="list-data-detail">
<p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
<p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1603">展開(kāi)</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
<p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1621">展開(kāi)</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
<p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1625">展開(kāi)</a></p>
</div>
<div class="list-data-detail">
<p class="no-open">消費(fèi)者的信息會(huì)逐漸增多，如果有一個(gè)廠家，用更好的原料和工藝，就會(huì)迅速占領(lǐng)市場(chǎng)<p>
<p><span>時(shí)間：2016-05-24</span> | <span>來(lái)源：本站</span> <a href="javascript:(0)" class="open-detail" data-id="1633">展開(kāi)</a></p>
</div>
</div>
<div class="list-data html-hide"></div>
</div></code>
The expansion event and js request in clickajax are as follows
<code><script>
;(function($){
//打開(kāi)
$('.open-detail').click(function(){
$(this).parent().siblings('p[class="no-open"]').addClass('yes-open');
$(this).text('收起');
$(this).attr('class', 'close-detail');
});
//收起
$('.close-detail').click(function(){
$(this).parent().siblings('p[class="yes-open"]').addClass('no-open');
$(this).text('展開(kāi)');
$(this).attr('class', 'open-detail');
});
//
});
function getAjaxList(_v, _c, _t){
$.ajax({
url : './ajax.php?op='+_v,
type : 'post',
dataType : 'json',
data : {'category':_c, 'template':_t},
success : function(msg){
if(msg.status == 1){
$('.html-hide').html(msg.html);
$('.html-hide').siblings('div').hide();
$('.html-hide').show();
} else {
$('.list-data').html('此處無(wú)您要的信息，到最新動(dòng)態(tài)去看看吧');
}
}
});
}
</script></code>
Settings and data settingsphp in div
<code><?php
...
...
...
foreach ($variable as $key => $value) {
$html .='<div class="list-data-detail">';
$html .='<p class="no-open">'.$value['desc'].'<p>';
$html .='<p><span>時(shí)間：'.date('Y-m-d', $value['updateTime']).'</span> | <span>來(lái)源：'.$value['author'].'</span> <a href="javascript:(0)" class="open-detail" data-id="'.$value['aid'].'">展開(kāi)</a></p>';
$html .='</div>';
}
$result['html'] = $html;
exit(json_encode($result));</code>
I added all the styles in php and div! But it just doesn't work.
Thanks for the invitation. I have encountered a similar problem before, and it was also the ajax() loaded data that caused the original effect to become invalid. Here’s how I handle it
<code>// 初始化數(shù)據(jù)的時(shí)候我也是這么寫(xiě)的
$('.message-but').click(function(){
// code...
});
// ajax加載后click事件不執(zhí)行，又改成這樣
$('.message-but').live("click",function(){
// code...
});</code>
After searching online, I found out that this live() is actually used almost the same as bind(). Both can bind corresponding trigger events to future elements, but there are still differences between the two. You can try both, I hope it helps you
There is no live method after jquery1.9
For versions before jQuery 1.9 we can write like this:
<code>$("a").live("focus",function(){
this.blur();
});
</code>
Since live was deleted after jQuery 1.9, it should be written like this:
<code>$(document).on("focus","a",function(){
this.blur();
});
</code>
I took a quick look, and if each of your list-data-detail is dynamically loaded through Ajax, then the click event you write directly at the beginning will not work, thinking that when your event is bound This DOM does not exist.
At this time, you need to use 事件委托, inside jQuery, that is,
$('.list-data').on('click', '.open-detail', function() {
/// here goes the code
});
That’s it. Through event delegation, the event of the child element is bound to the parent element. After the child element is clicked, the event will bubble up to the parent element, and the parent element is responsible for catching and triggering the event.
To perform click on dynamically loaded elements, you can do this
<code>$(document).on('click','.message-but',function(){
// code...
});</code>
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to get the current session ID in PHP?
Jul 13, 2025 am 03:02 AM
The method to get the current session ID in PHP is to use the session_id() function, but you must call session_start() to successfully obtain it. 1. Call session_start() to start the session; 2. Use session_id() to read the session ID and output a string similar to abc123def456ghi789; 3. If the return is empty, check whether session_start() is missing, whether the user accesses for the first time, or whether the session is destroyed; 4. The session ID can be used for logging, security verification and cross-request communication, but security needs to be paid attention to. Make sure that the session is correctly enabled and the ID can be obtained successfully.
PHP get substring from a string
Jul 13, 2025 am 02:59 AM
To extract substrings from PHP strings, you can use the substr() function, which is syntax substr(string$string,int$start,?int$length=null), and if the length is not specified, it will be intercepted to the end; when processing multi-byte characters such as Chinese, you should use the mb_substr() function to avoid garbled code; if you need to intercept the string according to a specific separator, you can use exploit() or combine strpos() and substr() to implement it, such as extracting file name extensions or domain names.
How do you perform unit testing for php code?
Jul 13, 2025 am 02:54 AM
UnittestinginPHPinvolvesverifyingindividualcodeunitslikefunctionsormethodstocatchbugsearlyandensurereliablerefactoring.1)SetupPHPUnitviaComposer,createatestdirectory,andconfigureautoloadandphpunit.xml.2)Writetestcasesfollowingthearrange-act-assertpat
How to split a string into an array in PHP
Jul 13, 2025 am 02:59 AM
In PHP, the most common method is to split the string into an array using the exploit() function. This function divides the string into multiple parts through the specified delimiter and returns an array. The syntax is exploit(separator, string, limit), where separator is the separator, string is the original string, and limit is an optional parameter to control the maximum number of segments. For example $str="apple,banana,orange";$arr=explode(",",$str); The result is ["apple","bana
JavaScript Data Types: Primitive vs Reference
Jul 13, 2025 am 02:43 AM
JavaScript data types are divided into primitive types and reference types. Primitive types include string, number, boolean, null, undefined, and symbol. The values are immutable and copies are copied when assigning values, so they do not affect each other; reference types such as objects, arrays and functions store memory addresses, and variables pointing to the same object will affect each other. Typeof and instanceof can be used to determine types, but pay attention to the historical issues of typeofnull. Understanding these two types of differences can help write more stable and reliable code.
Using std::chrono in C
Jul 15, 2025 am 01:30 AM
std::chrono is used in C to process time, including obtaining the current time, measuring execution time, operation time point and duration, and formatting analysis time. 1. Use std::chrono::system_clock::now() to obtain the current time, which can be converted into a readable string, but the system clock may not be monotonous; 2. Use std::chrono::steady_clock to measure the execution time to ensure monotony, and convert it into milliseconds, seconds and other units through duration_cast; 3. Time point (time_point) and duration (duration) can be interoperable, but attention should be paid to unit compatibility and clock epoch (epoch)
How to pass a session variable to another page in PHP?
Jul 13, 2025 am 02:39 AM
In PHP, to pass a session variable to another page, the key is to start the session correctly and use the same $_SESSION key name. 1. Before using session variables for each page, it must be called session_start() and placed in the front of the script; 2. Set session variables such as $_SESSION['username']='JohnDoe' on the first page; 3. After calling session_start() on another page, access the variables through the same key name; 4. Make sure that session_start() is called on each page, avoid outputting content in advance, and check that the session storage path on the server is writable; 5. Use ses
How does PHP handle Environment Variables?
Jul 14, 2025 am 03:01 AM
ToaccessenvironmentvariablesinPHP,usegetenv()orthe$_ENVsuperglobal.1.getenv('VAR_NAME')retrievesaspecificvariable.2.$_ENV['VAR_NAME']accessesvariablesifvariables_orderinphp.iniincludes"E".SetvariablesviaCLIwithVAR=valuephpscript.php,inApach
