TypeError: $ (…) .modal, bootstrap Modal ile bir işlev değildir

Başka bir görünümün HTML'sine dinamik olarak eklemeye çalıştığım bir önyükleme 2.32 modal var. Codeigniter 2.1 ile çalışıyorum. Aşağıdaki dinamik bir görünüme, bir ön yükleme kalıcı kısmi görünüşünü sokulması , var:

<div id="modal_target"></div>

ekleme için hedef div olarak. Benim görüşümde şuna benzeyen bir düğme var:

     <a href="#message" class="btn btn-large btn-info" data-action="Message" data-toggle="tab">Message</a>

JS'mde:

$.ajax({
    type    : 'POST', 
    url     : "AjaxUpdate/get_modal",
    cache   : false,
    success : function(data){ 
       if(data){
            $('#modal_target').html(data);

            //This shows the modal
            $('#form-content').modal();
       }
    }
});

Ana görünümün düğmesi:

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary btn-large">Modal powers, activate!</a></p></div>

Kısmi görünüm olarak ayrı olarak saklamak istediğim şey:

<div id="form-content" class="modal hide fade in" style="display: none;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Send me a message</h3>
    </div>
    <div class="modal-body">
        <form class="contact" name="contact">
             <fieldset>

               <!-- Form Name -->

            <legend>modalForm</legend>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="user">User</label>
              <div class="controls">
                <input id="user" name="user" type="text" placeholder="User" class="input-xlarge" required="">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="old">Old password</label>
              <div class="controls">
                <input id="old" name="old" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="new">New password</label>
              <div class="controls">
                <input id="new" name="new" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>

            <!-- Text input-->
            <div class="control-group">
              <label class="control-label" for="repeat">Repeat new password</label>
              <div class="controls">
                <input id="repeat" name="repeat" type="text" placeholder="placeholder" class="input-xlarge">
                <p class="help-block">help</p>
              </div>
            </div>



                </fieldset>
        </form>
    </div>


    <div class="modal-footer">
        <input class="btn btn-success" type="submit" value="Send!" id="submit">
        <a href="#" class="btn" data-dismiss="modal">Nah.</a>
    </div>
</div>

Düğmeye tıkladığımda modal doğru bir şekilde yerleştirildi, ancak şu hatayı alıyorum:

TypeError: $(...).modal is not a function 

Bunu nasıl düzeltebilirim?

mwebber'in yorumda ne dediğini vurgulamak istiyorum :

jQuery'nin iki kez dahil edilmediğini de kontrol edin

:)

benim için sorun buydu

Bu hata aslında, modalişlevi çağırmadan önce bootstrap'ın javascript'ini dahil etmemenizin sonucudur . Modal, jQuery'de değil bootstrap.js'de tanımlanmıştır. Bootstrap'in modalişlevi tanımlamak için aslında jQuery'ye ihtiyaç duyduğuna dikkat etmek de önemlidir , bu nedenle bootstrap'ın javascript'ini eklemeden önce jQuery'yi eklemeniz çok önemlidir. Hatayı önlemek için, modalişlevi çağırmadan önce jQuery'yi ve ardından bootstrap'ın javascript'i eklediğinizden emin olun . Başlık etiketimde genellikle aşağıdakileri yaparım:

<header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="/path/to/bootstrap/js/bootstrap.min.js"></script>
</header>

Jquery ve bootstrap'inizi bağladıktan sonra, kodunuzu jquery ve bootstrap'ın Script etiketlerinin hemen altına yazın.

$(document).ready(function($) {
  $("#div").on("click", "a", function(event) {
    event.preventDefault();
    jQuery.noConflict();
    $('#myModal').modal('show');

  });
});

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bu sorunu bu şekilde kullanarak tepki olarak çözdüm.

window.$('#modal-id').modal();

Olmadığını kontrol jqueryhtml dahil değildir kütüphane olduğunu aracılığı yük Ajax.remove <script src="~/Scripts/jquery[ver].js"></script>içinde seninAjaxUpdate/get_modal

Diğer bir olasılık da, dahil ettiğiniz diğer komut dosyalarından birinin JQuery'yi de ekleyerek veya $ ile çakışarak soruna neden olmasıdır. Dahil edilen diğer komut dosyalarınızı kaldırmayı deneyin ve sorunun çözülüp çözülmediğine bakın. Benim durumumda, tek kodumda saatlerce gereksiz yere arama yaptıktan sonra, ikili bir arama modelindeki komut dosyalarını kaldırdım ve rahatsız edici komut dosyasını hemen keşfettim.

Çalıştırmak

npm i @types/jquery
npm install -D @types/bootstrap

Angular Projenize jquery türlerini eklemek için projede. Bundan sonra şunları içerir

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

app.module.ts içinde

Ekle

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

index.html dosyanızda, gövde kapanış etiketinin hemen öncesinde.

Ve Angular 2-7 çalıştırıyorsanız, tsconfig.app.json dosyasının türler alanına "jquery" ekleyin.

Bu, Angular projenizdeki tüm 'modal' ve '$' hatasını kaldıracaktır.

Deneyimlerime göre, büyük olasılıkla jquery sürümü (çoklu sürüm kullanan) çakışmalarıyla gerçekleşti, sorunu çözmek için aşağıdaki gibi çakışmasız bir yöntem kullanabiliriz.

jQuery.noConflict();
(function( $ ) {
  $(function() {
    // More code using $ as alias to jQuery
    $('button').click(function(){
        $('#modalID').modal('show');
    });
  });
})(jQuery);

Laravel'de bu sorunu aşağıdaki satırı değiştirerek çözdüm: resources\assets\js\bootstrap.js

window.$ = window.jQuery = require('jquery/dist/jquery.slim');

-e

window.$ = window.jQuery = require('jquery/dist/jquery');

Benim durumumda, rails framework kullanıyorum ve iki kez jQuery gerekli. Bunun olası bir neden olduğunu düşünüyorum.

Önce app / assets / application.js dosyasını kontrol edebilirsiniz. Jquery ve önyükleme zincir dişlileri görünürse, ikinci bir kitaplığa gerek yoktur. Dosya şuna benzer olmalıdır:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

Sonra app / views / layouts / application.html.erb'yi kontrol edin ve jquery gerektirmesi için komut dosyasını kaldırın. Örneğin:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Bazen yeni başlayanlar birden fazla öğretici kod örneği kullandığında bu soruna neden olacağını düşünüyorum.

Benim için //= require jquerysonrasını yaşadım //= require bootstrap. Jquery'yi bootstrap'tan önce taşıdığımda her şey çalıştı.

Ben de aynı sorunu yaşadım. Değiştirme

$.ajax(...)

-e

jQuery.ajax(...)

işe yaramadı. Ama sonra jQuery'nin iki kez dahil edildiğini ve bunlardan birini kaldırmanın sorunu çözdüğünü gördüm .

Diğer cevaplar benim react.js uygulamamda işe yaramıyor, bu yüzden bunun için sade JavaScript kullandım.

Aşağıdaki çözüm çalıştı:

1. Kalıcı / iletişim kutusunun yakın bölümü için bir kimlik verin (aşağıdaki örnekte "myModalClose")

<span>
   className="close cursor-pointer"
   data-dismiss="modal"
   aria-label="Close"
                     id="myModalClose"
>
...

2. Bu kimliği kullanarak yukarıdaki kapat düğmesine bir tıklama etkinliği oluşturun:

   document.getElementById("myModalClose").click();

Muhtemelen jQuery kullanarak da kapat düğmesine aynı tıklamayı üretebilirsiniz.

Umarım yardımcı olur.

Sanırım düğmeni kullanmalısın

<a data-toggle="modal" href="#form-content"    

href yerine veri hedefi olmalıdır

<a data-toggle="modal" data-target="#form-content"    

sadece kalıcı içeriğin zaten yüklendiğinden emin olun

Sanırım sorun şu ki, modal gösterme iki kez çağrılıyor, biri ajax çağrısında iyi çalışıyor, modal doğru gösteriliyor dediniz, ancak hata muhtemelen bu düğmedeki başlatma eylemiyle birlikte geliyor, bu modal'ı işlemelidir, bu eylem yürütülemez çünkü o anda modal yüklenmedi.