Question

如何将hide等事件添加到动态创建的div中？

php生成下面的html代码，然后我将其附加到页面。之后我可以点击删除li删除整个文章div或隐藏它。

我尝试了这个但是没有用。

$( '.artical[id='+id+']' ).hide( "slow", function() {
    $('.artical[id='+id+']').remove();
});
?>
<div class="artical">
    <h1><?php echo  $obj['title']; ?></h1>
    <ul class="articalInfo">
        <li> February 12, 2014, 0</li>
        <li>Comments</li>
        <li>More</li>
        <li class="delete" name="<?php echo $id;?>">Delete</li>
        <li class="edit" name="<?php echo $id;?>">Edit</li>
    </ul>
    <p>
        <?php echo $obj['text']; 
            break;
        ?>
    </p>
</div>
<?php
    $( "body" ).delegate( "li", "click", function() {
        // send the id to removefunction to remove the element
        var r=confirm("Do you want to remove this artical?");
        if (r==true)
        {
            removeArticle($(this).attr('name'));
        }
});

Answer 1

使用on JQuery函数

$(document).on("click", "li", function () {
       // send the id to removefunction to remove the element
        var r=confirm("Do you want to remove this artical?");
        if (r==true)
        {
        removeArticle($(this).attr('name'));
        }
 });

Answer 2

使用jquery on喜欢

$(document).on("click","li",function()
{
//your code
});

参考以下链接

https://learn.jquery.com/events/event-delegation/

Answer 3

试试这个，

$(document).on( "click","li",function() {
    // send the id to removefunction to remove the element
    if (confirm("Do you want to remove this artical?")) {
        removeArticle($(this).attr('name'));
    }
});

您发布的code也是错误的尝试，

<div class="artical">
    <h1><?php echo  $obj['title']; ?></h1>
    <ul class="articalInfo">
        <li> February 12, 2014, 0</li>
        <li>Comments</li>
        <li>More</li>
        <li class="delete" name="<?php echo $id;?>">Delete</li>
        <li class="edit" name="<?php echo $id;?>">Edit</li>
    </ul>
    <p>
        <?php echo $obj['text']; 
            break;// don't use break if it has no loops and conditions
        ?>
    </p>
</div>
<script>
$(function(){
    $(document).on( "click","li",function() {
        // code for removing article after confirmation
        if (confirm("Do you want to remove this artical?")) {
            $('#'+$(this).attr('name')).hide( "slow", function() { // hiding the article
                $(this).remove(); // remove the article
            });
        }
    });
});
</script>

Answer 4

您需要将javascript包含在代码中。另请注意，您的文章不包含ID，最后您需要在结束div标记后处理您的javascript。请注意以下更改：

<div id="<?php echo $id; ?>" class="article">
    <h1><?php echo  $obj['title']; ?></h1>

    <ul class="articleInfo">
        <li> February 12, 2014, 0</li>
        <li>Comments</li>
        <li>More</li>
        <li class="delete" name="<?php echo $id;?>">Delete</li>
        <li class="edit" name="<?php echo $id;?>">Edit</li>
    </ul>

    <p>
        <?php echo $obj['text']; ?>
    </p>

</div>

<script type="text/javascript">
    $(document).ready( function() {
        $( '.article .delete' ).click( function() {
            if (confirm("Do you want to remove this artical?")) {
                $(this).closest('.article').hide( "slow", function() {
                    $(this).remove();
                });
            }
        });
    });
</script>

我不确定您对编辑链接的操作是什么，但您没有提供有关该编辑链接的任何详细信息。

Answer 5

使用这个简单的代码。这将给出期望的结果

<script> 
$(document).ready(function(){ 
$(".delete").on("click",function(){ 
    $(this).closest(".artical").remove(); 
});     
}); </script>

<div class="artical">
    <h1><?php echo  $obj['title']; ?></h1>
    <ul class="articalInfo">
        <li> February 12, 2014, 0</li>
        <li>Comments</li>
        <li>More</li>
        <li class="delete" name="<?php echo $id;?>">Delete</li>
        <li class="edit" name="<?php echo $id;?>">Edit</li>
    </ul>
    <p>
        <?php echo $obj['text']; 

        ?>
    </p>
</div>

如何隐藏动态创建的div

5 个答案: