мы можем написать скрипт для кнопки, которая находится внутри поповера? - PullRequest
Новая
       12

мы можем написать скрипт для кнопки, которая находится внутри поповера?

0 голосов
/ 07 июня 2018

Я создал поповер, чтобы при нажатии на изображение всплывающее окно появлялось.

Поповер работает.моя главная проблема в том, что я вставил кнопки во всплывающем окне.

, поэтому я хочу написать код кнопки javascript или jquery для кнопки, когда она нажата.Кто-нибудь может помочь с этим?

Я пытался, но он не работает !!!! 

$(function() {
  $('button').click(function() {
    var x = $(this).attr('class');
    alert(x);
  });
});
$(function() {
  $("[data-toggle=popover]").popover({
    html: true,
    container: 'body',
    content: function() {
      var content = $(this).attr("data-popover-content");
      return $(content).children(".popover-body").html();
    },
    title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
    },
    placement: "auto"
  });
});
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./isobar.js">
</script>


<span>
<img src="./img/more_options_icon.png" data-toggle="popover" tabindex="5" data-trigger="focus" data-popover-content="#moreoptions">
</span>
<div id="moreoptions" class="hidden">
  <div class="popover-body">
    <div class="list-group">
      <button type="button" class="list-group-item"><span class="gap"></span>Edit</button>
      <button type="button" class="list-group-item"><span class="gap"></span>Logic Builder</button>
      <button type="button" class="list-group-item"><span class="gap"></span>Uneploy</button>

    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 07 июня 2018

Ok. Вот обновленная версия моего ответа и проверенный и рабочий код.Секрет всплывающего окна заключается в том, чтобы запустить функцию соответствия в нужное время с помощью срабатывания поповера.Итак, код JS: 

function firePopover() {
            $('.hidden').css('display', 'block');
            var delay = 100;
            setTimeout(function () {
                $('button:not(.main)').unbind('click');
                $('button:not(.main)').click(function () {
                    var x = $(this).attr('class');
                    alert(x);
                    $('.hidden').css('display', 'none');
                });
            }, delay);
        }

Здесь я использую html-селектор 

:not(.main)

, чтобы предотвратить события привязки и отмены привязки к главной кнопке.Кроме того, мы должны обратить внимание на тот факт, что каждое повышение поповера связывает новый обработчик событий с каждой кнопкой.Это означает, что после n всплывающих окон каждая кнопка сработает n раз.Чтобы предотвратить этот эффект, можно связывать события только в первом повышении или, как я делал, отменять привязку события от кнопки при каждом повышении поповера.Что касается HTML-кода, то вот он: 

<button class="main" onclick="firePopover()">Fire Popover</button>
<div id="moreoptions" class="hidden" hidden>
    <div class="popover-body">
        <div class="list-group">
            <button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
            <button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
            <button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
        </div>
    </div>
</div>

Я только добавил кнопку «.main», чтобы принять симуляцию, и каждая кнопка получила дополнительный соответствующий класс «class-0», «class-1»«класс-2» для успешной демонстрации.Теперь, когда вы нажимаете на основную кнопку, появляются другие 3 кнопки.И наоборот, нажатие на любую из этих 3 кнопок приводит к срабатыванию оповещения и исчезновению всех из них.Я надеюсь, что это поможет вам. 

 function firePopover() {
            $('.hidden').css('display', 'block');
            var delay = 100;
            setTimeout(function () {
                $('button:not(.main)').unbind('click');
                $('button:not(.main)').click(function () {
                    var x = $(this).attr('class');
                    alert(x);
                    $('.hidden').css('display', 'none');
                });
            }, delay);
        }
.hidden {
  display: none;
}

button {
  float: left;
}

.class-0 {
  clear: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="main" onclick="firePopover()">Fire Popover</button>
    <div id="moreoptions" class="hidden" hidden>
        <div class="popover-body">
            <div class="list-group">
                <button class="class-0 list-group-item"><span class="gap"></span>Edit</button>
                <button class="class-1 list-group-item"><span class="gap"></span>Logic Builder</button>
                <button class="class-2 list-group-item"><span class="gap"></span>Uneploy</button>
            </div>
        </div>
    </div>
...