用ajax和脚本加载modal的html

Question

所以，我正在开发一个应用程序，它要求我构建一个向导html结构，并在模态中给出特殊行为。我的应用程序是在Laravel中完成的，问题如下：

我需要每次模态打开时通过ajax调用加载HTML结构，然后将html主体附加到.modal-content div。我这样做没有问题，当我尝试执行JavaScript代码时出现问题，它似乎只是回应。

结构如下：

收入/ index.blade.php

import UIKit

class ViewController: UIViewController {

@IBOutlet var drag: UIPanGestureRecognizer!
@IBOutlet weak var currentLabel: UILabel!
@IBOutlet weak var label1: UILabel!
@IBOutlet weak var label2: UILabel!
@IBOutlet weak var label3: UILabel!
@IBOutlet weak var label4: UILabel!
@IBOutlet weak var label5: UILabel!
@IBOutlet weak var label6: UILabel!
@IBOutlet weak var label7: UILabel!
@IBOutlet weak var label8: UILabel!
@IBOutlet weak var label9: UILabel!

let letter = "OX"
var currentLetter = Character!()
var decide = 0
var labelArray = [UILabel]()
var moveCounter = 0
override func viewDidLoad() {
    super.viewDidLoad()
    getCurrentLetter()
    labelArray = [label1,label2,label3,label4,label5,label6,label7,label8,label9]
}

func getCurrentLetter()
{
    let myRange = Range<String.Index>(start: letter.startIndex.advancedBy(decide), end: letter.startIndex.advancedBy(decide+1))
    currentLabel.text = letter.substringWithRange(myRange)
    currentLetter = Character(letter.substringWithRange(myRange))
}

func reset() {
    decide = 0
}
@IBAction func dragObject(sender: UIPanGestureRecognizer) {
    let points = sender.locationInView(view)
    let currentPoints = currentLabel.frame.origin
    currentLabel.center = CGPointMake(points.x, points.y)
    for item in labelArray {
        if CGRectContainsPoint(item.frame, points) {
            item.text = String(currentLetter)
            decide++
            drag.enabled = false
            currentLabel.center = currentPoints
        } else if drag.enabled == false {
            decide++
            drag.enabled = true
            currentLabel.center = currentPoints
        }
        if decide == 2 {
          reset()
        }
        getCurrentLetter()
      }
   }
}

收入/ modal.blade.php

    @section("modals")
        <div class="modal fade" id="incomesModal" tabindex="-1" role="dialog" aria-labelledby="incomesModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">

                </div>
            </div>
        </div>
    @endsection
@section("modalsScript")

    <script>
        $(function() {

            $('#incomesModal').on('show.bs.modal', function(){

                $.ajax({
                    url: "/incomes/newModal",
                    success: function(data){
                        $('#incomesModal .modal-content').html(data);
                    }

                });

            });

            $(".income-type").on("click", function(){

                alert("clicked");

            });

        });
    </script>
@endsection

请注意，我缩短了代码，因此很容易理解。 另请注意，此代码在没有ajax调用的情况下直接嵌入时有效。

因此，在显示模式后，ajax代码带来HTML并插入$（'＃incomesModal .modal-content'），即使在加载HTML结构之前，SCRIPT也已加载，但是，当我尝试点击任何$（“。income-type”）框没有任何反应！

有什么想法吗？

谢谢大家！

Answer 1

了解活动授权： 尝试：

 $("body").on("click",'.income-type',function(){

                alert("clicked");

});