Блог

Я использую https://craftpip.github.io/jquery-confirm / плагин. Мне нужно иметь возможность выбирать уникальные идентификаторы элементов, которые были динамически загружены из базы данных.

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

Мой вопрос в том, как я могу выбрать идентификатор элемента при нажатии. Я знаю, как это сделать с помощью простого 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 во время цикла

 <?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.
Спасибо всем, кто пытался помочь.

Я думаю, вы спрашиваете, как вызвать .confirm() элемент, на который нажат? Попробуйте это, вам не нужно знать идентификатор, потому что внутри функций обратного вызова в обработчиках событий 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!')
    }
 })
});
  

Я бы добавил, однако, что Дэн Деф прав в том, что вы, вероятно, захотите обернуть эти элементы в окружение div , чтобы не добавлять обработчик кликов к каждому a тегу на странице. Таким образом, в этом случае, вместо $('a').click(...) приведенного выше фрагмента, это будет $('#divId').find('a').click(...)

Вы можете поместить сгенерированные элементы 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!')
        }
    });
}
  

Вам нужен множественный селектор … примером может быть…:

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