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 be id="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;
});