Question

我正在使用https://craftpip.github.io/jquery-confirm/插件。我需要能够选择从数据库动态加载的唯一元素id。

 <div><a id="1" href="1">1</a></div>
 <div><a id="2" href="2">2</a></div>
 <div><a id="3" href="2">3</a></div>

Jquery的

 $('#1').confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
      console.log(this.content);
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 });

我的问题是如何在点击时选择元素的ID。我知道如何用纯JavaScript做到这一点。关于我正在尝试做什么的更多信息。它是从数据库动态生成的博客条目。每个div代表一个博客文章，<a>标记表示按下时将调用ajax删除该博客帖子的图标。确认您确实要删除后。

在JavaScript中我会做这样的事情。

 <div><a  id="1"  href="1" onclick="many(this.id)">1</a></div>
 <div><a  id="2" href="2" onclick="many(this.id)">2</a></div>
 <div><a  id="3" href="2" onclick="many(this.id)">3</a></div>

脚本

   function many(id) 
{
///ajax call 

}

我只是不想要JavaScript的默认确认框，所以我要使用jQuery插件。

也尝试过这样的事情，但jQuery不能在JavaScript函数内部工作

     function many(id) 
{
    $('#'+id).confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
      console.log(this.content);
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 });
}

PHP while循环

<?php  while ($row = $result->fetch()){ ?>
<article id="<?php echo $row['article_id'];?>">
    <div class="body>
       <h1><?php echo $row['title'];?></h1>
       <p><?php echo $row['article'];?></p>
       <div><a id="<?php echo $row['article_id'];?>" class="delete">x</a></div>
    </div>
</article>
<?php }?>

这最终为我工作。

$('.someClass').click( function(event) {
    var ele = $(this).attr('rel');
    // ele is the element you clicked on
    $.confirm({
    title: 'Delete!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
         var dataString = "blogpost="+ele;
        $.ajax({
            type: "POST",
            url: "http://localhost/new12/scripts/delete_blog_ajax.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
                if(html)
                {

                    $("#aid"+ele).fadeOut('slow', function(){
                        $(this).remove();
                    });

                        return false;
                }
            }
        });
        return true;
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 });

});

确认后按我做Ajax电话。成功时，它会删除淡出元素，并使用回调函数从DOM中删除元素。感谢所有试图提供帮助的人。

Answer 1

您可以将生成的div元素放在另一个容器中，然后执行以下操作：

$('#MyContainer').find('a').on('click', confirm)

编辑：为清楚起见，确认功能如下所示：

 function confirm(event) {
    $.confirm({
        title: 'Confirm!',
        content: 'Are you sure you want to delete!',
        confirm: function(){
            console.log(this.content);
        },
        cancel: function(){
             $.alert('Canceled!')
        }
    });
}

Answer 2

我认为你问的是如何在点击的元素上调用.confirm()？试试这个，你不需要知道ID，因为在jquery事件处理程序中的回调函数内部，this指的是触发事件的元素。

$('a').click(function () {
  $(this).confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
      console.log(this.content);
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 })
});

然而，我想补充一点，Dan Def对于你可能想要将这些元素包装在周围div中这一事实是正确的，这样你就不会添加点击处理程序页面上的每个 a标记。因此，在这种情况下，代替上面代码段中的$('a').click(...)，它将是$('#divId').find('a').click(...)

Answer 3

你需要多个选择器......一个例子可能是......：

$('#1, #2, #3').on('click', confirm);

https://api.jquery.com/multiple-selector/

var confirm = $.confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
          console.log(this.content);

    },
    cancel: function(){
        $.alert('Canceled!')
    }
});

jQuery和jQuery插件的唯一id选择

3 个答案: