如何从模态 window 运行一个 javascript 函数？

Question

我有一个select，它的值变化计算执行一个函数。

$("#modelo").change(function () {
            var id_modelo = $(this).val();
            $.ajax({
                type: "POST",
                url: "<?php echo base_url(); ?>cotizacion/getimages",
                dataType: 'json',
                async: true,
                data: "id_modelo=" + id_modelo,
                beforeSend: function () {

                    //$('#msgUsuario').html('<span></span>');
                },
                success: function (data) {
                    $("#imagenesnaves").html(data);
                    $('#contenimages').show();
                }
            });
            return false;
        });

其中运行是下面的方法控制器

public function getImages() {
        $id_modelo = $this->input->post('id_modelo', TRUE);
        $imagenes = $this->Modelos_model->getImages($id_modelo);
        $output = NULL;
        if ($imagenes) {
            $index = 0;
            foreach ($imagenes as $fila) {
                $output .= '<div class="file-preview-thumbnails">
                                <div class="file-live-thumbs">
                                    <div class="file-preview-frame"  data-fileindex="4" data-template="image">
                                        <div class="kv-file-content">
                                            <img src="' . base_url() . 'uploads/' . $fila->name . '" class="kv-preview-data file-preview-image" style="width:auto;height:160px;">
                                        </div>
                                        <div class="file-thumbnail-footer">
                                            <div class="file-actions">
                                                <div class="file-footer-buttons">';
                                                    if ($fila->active == 1) {
                                                        $output .=  '<a href = "javascript:desactivar(' . $fila->id_imagen . ');" type = "button" class = "kv-file-deactivate btn btn-xs btn-default" title = "Desactivar imagen">
                                                    <i class = "glyphicon glyphicon-remove text-danger"></i></a>';
                                                    } else {
                                                        $output .=  '<a id="work" type = "button" class = "kv-file-deactivate btn btn-xs btn-default" title = "Activar imagen">
                                                    <i class = "glyphicon glyphicon-ok text-primary"></i></a>';
                                                    }
                                                 $output .= '</div>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>';
                        $index ++;
            }
            $output .= '<div class="clear"></div>';
        } else {
            $output .= '<p>No hay imagenes disponibles para mostrar. Prueba agregando una.</p>';
        }
        echo json_encode($output);
    }

此方法已加载到视图中

<div id="contenimages" class="col-lg-12" style="text-align: center; display: none">
                <a data-toggle="modal" data-target="#events-imagenes">Ver imagenes</a>
                <div class="modal fade col-lg-12" id="events-imagenes">
                    <div class="modal-dialog" style=" width: 800px !important">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            </div>
                            <div class="modal-body clearfix" style="height: 95%; display: initial">
                                <div class=" kv-main">
                                    <div class="file-input ">
                                        <div class="file-preview">
                                            <div id="imagenesnaves" class=" clickable" tabindex="-1">
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="modal-footer" style="height: 10%; text-align: center">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
</div>

加载后，每个图像都会有一个打开或关闭的按钮

if ($fila->active == 1) {
$output .=  '<a href = "javascript:desactivar(' . $fila->id_imagen . ');" type = "button" class = "kv-file-deactivate btn btn-xs btn-default" title = "Desactivar imagen">
<i class = "glyphicon glyphicon-remove text-danger"></i></a>';
} else {
$output .=  '<a id="work" type = "button" class = "kv-file-deactivate btn btn-xs btn-default" title = "Activar imagen">
<i class = "glyphicon glyphicon-ok text-primary"></i></a>';
}

函数是运行 javascript 脚本进入视图

    function activar(id_imagen) {
        $.ajax({
            type: "POST",
            url: '<?php echo base_url() ?>imagenes/activate',
            data: "id_imagen=" + id_imagen,
            beforeSend: function () {
                //$('#msgUsuario').html('<span></span>');
            },
            success: function (respuesta) {
                $('#contenedor2').html(respuesta);
            }
        });
    }
    function desactivar(id_imagen) {
        $.ajax({
            type: "POST",
            url: '<?php echo base_url() ?>imagenes/deactivate',
            data: "id_imagen=" + id_imagen,
            beforeSend: function () {
                //$('#msgUsuario').html('<span></span>');
            },
            success: function (respuesta) {
                $('#contenedor2').html(respuesta);
            }
        });
    }
    function eliminar(id_imagen) {
        $.ajax({
            type: "POST",
            url: '<?php echo base_url() ?>imagenes/eliminar',
            data: "id_imagen=" + id_imagen,
            beforeSend: function () {
                //$('#msgUsuario').html('<span></span>');
            },
            success: function (respuesta) {
                $('#contenedor2').html(respuesta);
            }
        });
    }
</script>

但是模态window打开的时候，不运行，那会是什么？

Answer 1

这是因为您的 DOM 在您 AJAX 获取它们之前不存在。您需要使用 $.on 方法来执行此操作：

$("#modelo").change(function () {

改为

$("#modelo").on('change', function () {

如何从模态 window 运行一个 javascript 函数？

How to run a javascript function from a modal window?

javascript

php

ajax

codeigniter-3

如何从模态 window 运行 一个 javascript 函数？

How to run a javascript function from a modal window?

javascript

php

ajax

codeigniter-3

如何从模态 window 运行一个 javascript 函数？