Question

抱歉，我仍然是使用jquery的新手，所以这可能是一个简单的问题。我正在尝试设置一个带有表格的div标签，并带有一个隐藏div标签的按钮。我想出了如何使用每个div标签的id标签，但我需要一些更像是一个可以处理无限按钮的类（至少100个）。这是我试过的。我把javascript代码放在动态返回的代码中。按钮1工作，按钮5 6显示，但它们不起作用。

如果你有一分钟指向正确的方向，请看看。

由于

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" },
                function(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;

Answer 1

我真的不知道JQuery，我承认我并没有真正理解整个问题，但会尝试说一些可能有帮助的东西......

如果您不想为每个div使用特殊ID，可以尝试使用某种闭包来传递此信息：

function make_hider(dom_node){
    function hider(){
        dom_node.hide() //Do anything you want with `dom_node`
    }
    return hider;
}

所以你可以做点什么

for each button:
    this_buttons_div = button.parentNode;
    button.onclick = make_hider(this_buttons_div);

Answer 2

我认为你必须使用jquery的live函数来连接动态添加元素的点击处理程序。尝试将“＃remove1”代码中使用的单击处理程序更改为：

$("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;
});

Answer 3

我认为你的更大问题是动态加载的代码存在一些问题。

如果您将该代码复制粘贴到html文件中并在浏览器中进行测试，则会看到一些错误。

例如：

$( "#removealert1 )应为$( "#removealert1" )
id="removealert1 />应为id="removealert1" />
就在您的CDATA关闭（//]]>）之前，您有一些应该删除的});松散

我认为应该让你的动态代码工作。

最后但并非最不重要的...回到您的主页，使用document.getElementById("dynamiccode").innerHTML=data;似乎删除了您的<script>，我使用$("#dynamiccode").html(data)进行了测试，但它起了作用，至少在Firefox ...虽然不知道其他浏览器。

希望这有帮助。

如何动态隐藏动态创建的div标签？

3 个答案: