How to dynamically hide a div tag that was created dynamically?
Sorry, I am still new using jquery so this might be an easy question. I am trying to setup a div tag with a table in it, with a button to hide the div tag. I figured out how to get it to work with using a id tag for each div tag, but I need something more like a class that can handle unlimited buttons (well at least 100). Here is what I tried. I put the javascript code in the dynamic returned code. Button 1 works, and button 5 6 show, but they don't work.
Please take a look if you have a minute point me in the right direction.
Thanks
code.html
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript"> //<![CDATA[
$(document).ready(function() {
$( "#remove0" ).click(function() {
var checkattrib = $(this).attr("src");
if ( checkattrib != "ajax-loader.gif" ) {
$(this).attr("src", "ajax-loader.gif");
mytimer0 = setTimeout(delayme0,1000);
} else {
$(this).attr("src", "req/icons/icon_checknotok.gif");
clearTimeout(mytimer0);
}
return false;
});
function delayme0() {
$( "#alert0" ).hide();
$.post( "update.php", { mydata: "654321" },
functi开发者_Go百科on(data) {
document.getElementById("dynamiccode").innerHTML=data;
});
return false;
}
$( "#remove1" ).click(function() {
var checkattrib = $(this).attr("src");
if ( checkattrib != "req/icons/icon_waitani.gif" ) {
$(this).attr("src", "req/icons/icon_waitani.gif");
mytimer1 = setTimeout(delayme1,1000);
} else {
$(this).attr("src", "req/icons/icon_checknotok.gif");
clearTimeout(mytimer1);
}
return false;
});
function delayme1() {
$( "#alert1" ).hide( "clip", 1000 );
$.post( "update.php", { mydata: "445566" } );
return false;
}
});
//]]>
</script>
</head>
<body>
<div id='alert0'>
<table><tr><td>
Button 1: <input type="image" title="Remove Alert" src="req/icons/icon_checknotok.gif" value="" id="remove0" />
</td></tr></table>
</div>
<div id='alert1'>
<table><tr><td>
Button 2: <input type="image" title="Remove Alert" src="req/icons/icon_checknotok.gif" value="" id="remove1" />
</td></tr></table>
</div>
</form>
<div id='dynamiccode'></div>
<br />
update.php
// read data from database with id tag from ajax
// return new data
print <<<END
<script type="text/javascript"> //<![CDATA[
$( "#removealert1 ).click(function() {
var checkattrib = $(this).attr("src");
if ( checkattrib != "ajax-loader.gif" ) {
$(this).attr("src", "ajax-loader.gif");
delaydyn1 = setTimeout(delaydyn,1000);
} else {
$(this).attr("src", "req/icons/icon_checknotok.gif");
clearTimeout(delaydyn1);
}
return false;
});
function delaydyn() {
$( "#alerttable" ).hide();
$.post( "update.php", { mydata: "1001010" } );
return false;
}
});
//]]>
</script>
<div id='alerttable'>
<table><tr><td>
Button 5: <input type="image" title="Remove Alert" src="req/icons/icon_checknotok.gif" value="" id="removealert1 />
</td></tr></table>
</div>
<script type="text/javascript"> //<![CDATA[
$( "#removealert2" ).click(function() {
var checkattrib = $(this).attr("src");
if ( checkattrib != "ajax-loader.gif" ) {
$(this).attr("src", "ajax-loader.gif");
delaydyn2 = setTimeout(delaydyn2,1000);
} else {
$(this).attr("src", "req/icons/icon_checknotok.gif");
clearTimeout(delaydyn2);
}
return false;
});
function delaydyn2() {
$( "#alerttable2" ).hide();
$.post( "update.php", { mydata: "1001010" } );
return false;
}
});
//]]>
</script>
<div id='alerttable'>
<table><tr><td>
Button 6: <input type="image" title="Remove Alert" src="req/icons/icon_checknotok.gif" value="" id="removealert2" />
</td></tr></table>
</div>
END;
I think that your bigger problem is that your code loaded dynamically has some problems.
If you copy-paste that code into a html file and test it in your browser you'll see some errors.
Like for instance:
$( "#removealert1 )should be$( "#removealert1" )id="removealert1 />should beid="removealert1" />- Just before your CDATA closures (
//]]>) you have a couple loose});that should be deleted
I think that should make your dynamic code work.
Last but not least... back to your main page, using document.getElementById("dynamiccode").innerHTML=data; seems to strip out your <script>s, I tested using $("#dynamiccode").html(data) instead and it worked, at least on Firefox... don't know about the other browsers though.
Hope this helps.
I don't really know JQuery, and I confess I didn't really understand the whole question, but will try say something that might help...
If you don't want to use a special ID for each of your divs you can try to use some kind of closure to pass this info:
function make_hider(dom_node){
function hider(){
dom_node.hide() //Do anything you want with `dom_node`
}
return hider;
}
So you can do something like
for each button:
this_buttons_div = button.parentNode;
button.onclick = make_hider(this_buttons_div);
I think you will have to use live function of jquery to wireup click handlers for dynamically added elements. Try changing the click handler used in the code for "#remove1"to as below:
$("input[id^=remove]")live("click", function () {
var checkattrib = $(this).attr("src");
if (checkattrib != "req/icons/icon_waitani.gif") {
$(this).attr("src", "req/icons/icon_waitani.gif");
mytimer1 = setTimeout(delayme1, 1000);
} else {
$(this).attr("src", "req/icons/icon_checknotok.gif");
clearTimeout(mytimer1);
}
return false;
});
加载中,请稍侯......
精彩评论