【问题标题】:How to run a javascript function from a modal window? [duplicate]如何从模式窗口运行 javascript 函数? [复制]
【发布时间】:2016-06-30 19:46:06
【问题描述】:

我有一个选择,值计算的变化执行一个函数。

$("#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>

但是当模态窗口打开时,不运行,会是什么?

【问题讨论】:

  • 在 Firefox 或 Chrome(ium) 中使用 F12 打开控制台,看看是否出现错误
  • 可能很简单:$("#modelo").change(function () { 改成$("#modelo").on('change', function () {
  • 没有错误,我以为是JQuery,但不是
  • @Farkie 那不是问题,就是成功,通过ajax加载图片,但是包含图片的div里面的按钮没有执行js函数
  • @JayBlanchard 是的,它是重复的

标签: javascript php ajax codeigniter-3


【解决方案1】:

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

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

改成

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

【讨论】:

  • $(".clickable").on("click", ".act", function () { var value = $(this).attr('data-record-id');激活(值);});谢谢
猜你喜欢
  • 2011-10-31
  • 2011-12-30
  • 2019-02-25
  • 1970-01-01
  • 2014-05-07
  • 1970-01-01
  • 1970-01-01
  • 2011-07-31
  • 1970-01-01
相关资源
最近更新 更多