jQuery 和 jQuery 插件唯一 ID select

Question

我正在使用 https://craftpip.github.io/jquery-confirm/ 插件。我需要能够 select 从数据库动态加载的唯一元素 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!')
    }
 });

我的问题是如何在单击时 select 元素的 ID。我知道如何使用普通的 JavaScript 来做到这一点。关于我正在尝试做的事情的更多信息。它是从数据库动态生成的博客条目。每个 div 代表一个博客 post，<a> 标签代表图标，按下该图标将调用 ajax 删除该博客 post。确认确实要删除后。

在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

您需要多个选择器...例如...:[=13=]

$('#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!')
    }
});

Answer 2

您可以将生成的 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 3

我想你问的是如何在点击的元素上调用 .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 中，这样您就不会向 [= 添加点击处理程序21=]页面上的每个 a 标签。所以在那种情况下，上面代码片段中的 $('a').click(...) 将是 $('#divId').find('a').click(...)

jQuery 和 jQuery 插件唯一 ID select

jQuery and jQuery plugin unique id select

html

javascript

jquery

confirm