Question

我有一个函数，如果满足某些条件[通过来自3个不同字段（两个<input>元素和一个<selection>元素]的输入将在元素上创建并显示一个弹出窗口。我目前仅当所有3个字段都包含值时才显示popover，这样我就可以测试popover的显示/隐藏功能。选择元素与popover相关联...

<select data-toggle="popover" data-trigger="manual" class="invalid-model-popover        select-group aircraft-model" style="width: 90%;">
    <option value="default" selected>Select a model...</option>
</select>

这是我用来创建popover的代码。

verifyRoute: function() {

    $('#' + this.currentLeg.attr('id') + ' .invalid-model-popover').popover({
        placement: 'bottom',
        html: true,
        content: "<div style='display:inline-block;width:100%'><i class='glyphicon         glyphicon-remove pull-right'>" +
                "</i></div>" +
                "<div style='font-weight:bold'>Note:</div>" +
                "<div>Aircraft range does not meet<br>leg requirements." +
                "Select<br>alternate aircraft or arrange<br>fuel" +
                " stops</div>"

    }).click(function(event) {   
            $('#' + routeVerifier.currentLeg.attr('id') + ' .glyphicon-remove').click(function() {
            $('#' + routeVerifier.currentLeg.attr('id') + ' .invalid-model-popover').popover('hide');
        });

    });

    $('#' + this.currentLeg.attr('id') + " .invalid-model-popover").popover('show');
},

所以目前当我从动作集生成弹出窗口时，“在两个文本输入中输入内容，从select元素中选择一个选项，弹出窗口，然后点击”x“然后”弹出窗口关闭。当我使用序列“从select元素中选择一个选项，在两个文本输入中输入内容”然后出现弹出窗口但是没有设置“x”的onClick。如果我单步执行代码注册事件....

.click(function(event) {   
        $('#' + routeVerifier.currentLeg.attr('id') + ' .glyphicon-remove').click(function() {
        $('#' + routeVerifier.currentLeg.attr('id') + ' .invalid-model-popover').popover('hide');
    });

});

甚至没有运行。这是一个解释问题的小提琴http://jsfiddle.net/restin84/fxf9wneb/68/任何建议都将受到高度赞赏。

Answer 1

看到这个小提琴：http://jsfiddle.net/fxf9wneb/72/

问题实际上是因为当您绑定“X”按钮的单击事件时，它实际上不存在于HTML文档中。所以'.glyphicon-remove'选择器的长度为0.我刚刚为你的代码添加了popover显示的事件，并且当向用户显示popover时，我已经绑定了'X'按钮的点击事件。它的工作就像一个魅力。

var verifier = {
    inputOne: null,
    inputTwo: null,
    selection: null,

    init: function () {
        this.inputOne = $('#input-1');
        this.inputTwo = $('#input-2');
        this.selection = $('.invalid-model-popover');
        this.inputOne.on('blur', function () {
            verifier.verify();
        });
        this.inputTwo.on('blur', function () {
            verifier.verify();
        });
        this.selection.on('change', function () {
            verifier.verify();
        });
    },

    verify: function () {
      var input1 = this.inputOne.val();
        var input2 = this.inputTwo.val();
        var select = verifier.selection.find("option:selected").text().trim();
        if (input1 && input2 && select !== "Select something") {
            this.createPopover();
        }
    },

    createPopover: function () {
       $(' .invalid-model-popover').popover({
            placement: 'top',
            html: true,
            content: "<div style='display:inline-block;width:100%'><i class='glyphicon glyphicon-remove pull-right'>" +
                "</i></div>" +
                "<div style='font-weight:bold'>Note:</div>" +
                "<div> Choose something else</div>"
        }).click(function (event) {
            $(' .glyphicon-remove').click(function () {
                $(' .invalid-model-popover').popover('destroy');
            });
        
        });
        
        $(" .invalid-model-popover").popover('show');
        
        $('.invalid-model-popover').on('shown.bs.popover', function () {
  $(' .glyphicon-remove').click(function () {
                $(' .invalid-model-popover').popover('destroy');
            });
});
    }
}

verifier.init();

#space {
    height: 300px;
}

.glyphicon-close {
    cursor: pointer;
}

<div id="space"></div>

<select data-toggle="popover" data-trigger="manual" class="invalid-model-popover ">
    <option value="default" selected>Select something</option>
    <option>Option 2</option>
    <option>Optoin 3</option>
</select>
<input id="input-1" placeHolder='Search' type="text" autocomplete="off" />
<input id="input-2" placeHolder='Search' type="text" autocomplete="off" />

每次创建弹出窗口时都不会运行Bootstrap popover单击事件代码

1 个答案: