通过JQuery调用未显示引导模型窗口

Question

我要做的是通过使用jquery调用弹出一个引导js模型

$("#id").modal("show")

但它在任何情况下都不起作用，在这个链接中提到了几个案例，但没有一个在我的案例中起作用。

我还通过了以下链接

引导模型不工作

未显示引导模式窗口

调用链接的引导模型

引导模式-弹出窗口未显示

https://getbootstrap.com/docs/4.0/components/modal/

但是我不能得到任何帮助，我可以通过多一个按钮并通过jquery调用按钮的click（）函数来触发模型，这工作很好，但不是模态情况。

我的代号在这里

<div class="modal fade" id="addLocationTagModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabelLocation">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" id="idButtonCloseLocation" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabelLocation">Enter Location</h4>
        </div>

        <div class="modal-body">

            <div class="row">
                <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">                                          
                    <div class="form-group">

                        <?php
                        $preferredLocation = "";
                        if (strtolower(getUserPreferredLocation($row_user, $conn)) !== "no") {
                            $preferredLocation = getUserPreferredLocation($row_user, $conn);
                        }
                        ?>
                        <input type="text" class="form-control" value="<?php echo $preferredLocation; ?>" placeholder="Location" id ="locationSuggested" name="locationSuggested" />
                        <span>
                            <span id="suggesstionBoxLocation" ></span>            
                        </span> 

                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">                                           
                    <div class="pLace-order">
                        <button type="button" name="buttonLocation" onclick="getTagSelected();" class="btn btn-success" value="submit">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

null

Jquery调用在这里

<script>


function detachStore(url){

//alert(url);
//document.getElementById("buttonDeleteStore").click(); // Click on the checkbox
// For Testing Purpose to set the data-target

jQuery.noConflict();
$(document).ready(function () {

  $("#addLocationTagModel").modal("toggle");  
alert("Hello");
    //$("#buttonDeleteStore").click();


  // $('#addLocationTagModel').appendTo("body").modal('show');

});

}

null

和混合的PHP代码,我在元素调用上有onclick函数,它工作得很好。

<td>
                                <?php
                                $i = 1;
                                foreach (unserialize($row['store_id']) as $store_id) {

                                    $stores = $conn->query("select * from tb_stores where ID = " . $store_id);

                                    while ($stores_row = $stores->fetch_assoc()) {
                                        $store_price = $conn->query("select * from tb_add_price_of_products where product_id=" . $row["ID"] . " and store_id=" . $stores_row["ID"]);
                                        $store_price_row = $store_price->fetch_assoc();
                                        //echo $store_price_row["price"];

                                        if ($i == 1) {
                                            echo "<a href='#' data-toggle='modal' title='$"
                                            . $store_price_row["price"] . "-" . $stores_row["location"] . "'"
                                            . " onclick=\"detachStore('" . $url . "product-registry?action=delete-store&product_id=". $row["ID"] . "&store_id=" . $stores_row["ID"] . "');\" >" 
                                            . $stores_row['name'] . "</a>";
                                        } else {
                                            echo ", <a href='#' data-toggle='modal' title='$"
                                            . $store_price_row["price"] . "-" . $stores_row["location"] . "'"
                                            . " onclick=\"detachStore('" . $url . "product-registry?action=delete-store&product_id=". $row["ID"] . "&store_id=" . $stores_row["ID"] . "');\" >" 
                                            . $stores_row['name'] . "</a>";
                                        }
                                        $i++;
                                    }
                                }
                                ?>
                                <button type="button" id="buttonDeleteStore" data-toggle="modal" data-target="#add_price_modal">Button</button>
                            </td>

我花了几个小时在上面，甚至没有JavaScript错误，可能是我在某个地方做错了什么，如果有人能把它拉出来，那将是很感激的。

Answer 1

我在看别的邮件

TypeError：$（...）。Modal不是带有引导模式的函数

我换下了

 $("#id").modal("show")

与

jQuery("#id").modal("show") 

这个把戏在这里奏效了，它开始奏效了。我仍然不知道为什么它不能和美元一起工作。

还有一点，我们需要包含jQuery.noConflict（）；以上则声明避免重复。