onClick() Javascript function not being recognized, ReferenceError: function is not defined, using document Ready

Question

我已经阅读了所有其他案例，但我没有任何运气。我正在做我自己的 jQuery 网格。我试图在单击保存按钮时触发一个函数（其他 jQuery 函数正在运行）......这是我包含 Javascript 文件“newsletter.js”的地方。 . jQuery 和 bootstrap 文件正在由 PHP symfony 1.4 上该模块的配置文件加载...

<body><div class="col-lg-7 col-lg-7-bc">

              
    <h3 style="font-size:20px"> JURISPRUDENCIA</h3>

    <p>

        </br>

    </p>
  
       <div class="col-xs-6 col-sm-4 item ico "><a id="newsletters" target="_blank">Newsletters |</a></div>
        
       <div class="col-xs-6 col-sm-4 item ico "><a  id="fallos" target="_blank">Navegar |</a></div>

       <div class="col-xs-6 col-sm-4 item ico"><a id="cuadernos_mpd" target="_blank">Cuadernos del MPD</a></div>
     
        
       <div id="grilla"></div>
      



</div>

<?php use_javascript("jurisprudencia/newsletter.js");
     use_javascript("jurisprudencia/funciones_grilla.js");
?>

这是我的 .js 文件：

$(document).ready(function(){   

    //API methods newsletters
    //guardar
    
    function guardarNewsletter(id){

        alert(id);

        /*$("#fieldset_"+id).show();
        $("#fieldset_hidden_"+id).hide();
        
        
            
             $.ajax({
                  url:"/newsletter/guardarNewsletter", 
                  data: newsletter.serialize(), 
                  success:function(data) {
                     alert("Row Guardada"); 
                  }
               });*/
        
    }
    
    
    $("#newsletters").click(function(){
        $.getJSON("/newsletter/getNewsletters", function(result){
            
            var grid="<br><table id='newsletter_grid'>";
            grid+="<thead><tr><th></th><th>Año</th><th>Mes</th><th>Quincena</th><th></th><th></th><th>Publicado</th></tr></thead>";
            
             grid+="<tr><td><button id='agregar_button'>Nuevo</button></td></tr>";
            
             grid+="<tr id='nuevo_field' style='display:none'>";
             
             grid+=crearNuevaRow();
             
             grid+="</tr>";
     
                
             
            $.each(result, function(i, elem){
            
                //show view fieldset, son los campos que se muestran para visualizar los datos
                
                grid+="<tr id='fieldset_"+elem.id+"'>";
                            
                grid+=mostrarElementosViewMode(elem);               
            
                grid+="</tr>";
                
               
                //hidden field
                
                grid+="<tr id='fieldset_hidden_"+elem.id+"' style='display:none'>";
                
                grid+=crearRowHidden(elem);
            
                grid+="</tr>";
                
                
            });
            
            grid+="</table>";
            
            $("#grilla").html(grid);

            
        });
        
        
     
        
    }); 
    
    //crea los elementos editables con el value de su correspondiente existente en modo View o se usa para crear un elemento nuevo
    
    function crearRowHidden(elem){
        
        var nuevoHiddenFieldSet="";
        
        nuevoHiddenFieldSet+="<td><input type='hidden' value='"+elem.id+"'></td>";
        
        nuevoHiddenFieldSet+="<td><input name='anio' value='"+elem.anio+"'/></td>";
        
        nuevoHiddenFieldSet+="<td><input name='anio' value='"+elem.mes+"'/></td>";
        
        nuevoHiddenFieldSet+="<td><input name='quincena' value='"+elem.quincena+"'/></td>";
    
        nuevoHiddenFieldSet+="<td><button value='Guardar' name='guardar_newsletter' id='guardar_newsletter_"+elem.id+"' onclick='guardarNewsletter("+elem.id+")'>Guardar</td>";
                
        nuevoHiddenFieldSet+="<td></td>";
        
        if(elem.publicado==1){
            nuevoHiddenFieldSet+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado' checked='checked'></td>";
        }else{
            nuevoHiddenFieldSet+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado'></td>";
        }
        return nuevoHiddenFieldSet;
     
    }
    
    function crearNuevaRow(){
        
        var nuevaRow="";
        
        nuevaRow+="<td><input type='hidden' value=''></td>";
        
        nuevaRow+="<td><input name='anio' value=''/></td>";
        
        nuevaRow+="<td><input name='anio' value=''/></td>";
        
        nuevaRow+="<td><input name='quincena' value=''/></td>";
    //ver que ponerle en id
        nuevaRow+="<td><button value='Guardar' name='guardar_newstletter' id=''>Guardar</td>";
                
        nuevaRow+="<td></td>";
        //ver que ponerle en id
        nuevaRow+="<td><input type='checkbox' id='' name='publicado'></td>";

        return nuevaRow;
        
    }
    
    //muestra los elementos del listado que se trae de la base de datos
    
    function mostrarElementosViewMode(elem){
        
        var elemento;
        
        elemento+="<td><input type='hidden' value='"+elem.id+"'></td>";
        
        elemento+="<td>"+elem.anio+"</td>";
        
        elemento+="<td>"+elem.mes+"</td>";
        
        elemento+="<td>"+elem.quincena+"</td>";
        
        elemento+="<td><button id='editar_"+elem.id+"' value='Editar' onclick='muestraEditarFields(\""+elem.id+"\")'>Editar</td>";
        
        elemento+="<td><button id='eliminar_newsletter_"+elem.id+"' value='Eliminar'>Eliminar</td>";
        
        if(elem.publicado == 1){
            elemento+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado' checked='checked'></td>";
        } else {
            elemento+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado'></td>";
        }
        
        return elemento;
        
    }
    
});

这是不起作用的部分：

nuevoHiddenFieldSet+="<td><button value='Guardar' name='guardar_newsletter' id='guardar_newsletter_"+elem.id+"' onclick='guardarNewsletter("+elem.id+")'>Guardar</td>";

我尝试使用 jQuery 单击事件，但当我单击按钮时，我总是收到同样的错误，而不是应显示的警报：

ReferenceError: guardarNewsletter is not defined

<!DOCTYPE html>

此网格上的编辑按钮可以使用，所以我不知道为什么 jQuery 无法识别我的功能。我读过这可能是调用函数的时间问题，但在这种情况下我不确定。基本上我所做的是从数据库中获取行，并创建一个用于可视化和一个隐藏用于编辑，编辑字段显示但当我想保存时出现错误。对此事有任何了解吗？

Answer 1

您的代码正在定义函数，但它在全局函数中不可用

function guardarNewsletter(id){

    alert(id);

    /*$("#fieldset_"+id).show();
    $("#fieldset_hidden_"+id).hide();



         $.ajax({
              url:"/newsletter/guardarNewsletter", 
              data: newsletter.serialize(), 
              success:function(data) {
                 alert("Row Guardada"); 
              }
           });*/

}
$(document).ready(function(){   

//API methods newsletters
//guardar


$("#newsletters").click(function(){
    $.getJSON("/newsletter/getNewsletters", function(result){

        var grid="<br><table id='newsletter_grid'>";
        grid+="<thead><tr><th></th><th>Año</th><th>Mes</th><th>Quincena</th><th></th><th></th><th>Publicado</th></tr></thead>";

         grid+="<tr><td><button id='agregar_button'>Nuevo</button></td></tr>";

         grid+="<tr id='nuevo_field' style='display:none'>";

         grid+=crearNuevaRow();

         grid+="</tr>";



        $.each(result, function(i, elem){

            //show view fieldset, son los campos que se muestran para visualizar los datos

            grid+="<tr id='fieldset_"+elem.id+"'>";

            grid+=mostrarElementosViewMode(elem);               

            grid+="</tr>";


            //hidden field

            grid+="<tr id='fieldset_hidden_"+elem.id+"' style='display:none'>";

            grid+=crearRowHidden(elem);

            grid+="</tr>";


        });

        grid+="</table>";

        $("#grilla").html(grid);


    });




}); 

//crea los elementos editables con el value de su correspondiente existente en modo View o se usa para crear un elemento nuevo

function crearRowHidden(elem){

    var nuevoHiddenFieldSet="";

    nuevoHiddenFieldSet+="<td><input type='hidden' value='"+elem.id+"'></td>";

    nuevoHiddenFieldSet+="<td><input name='anio' value='"+elem.anio+"'/></td>";

    nuevoHiddenFieldSet+="<td><input name='anio' value='"+elem.mes+"'/></td>";

    nuevoHiddenFieldSet+="<td><input name='quincena' value='"+elem.quincena+"'/></td>";

    nuevoHiddenFieldSet+="<td><button value='Guardar' name='guardar_newsletter' id='guardar_newsletter_"+elem.id+"' onclick='guardarNewsletter("+elem.id+")'>Guardar</td>";

    nuevoHiddenFieldSet+="<td></td>";

    if(elem.publicado==1){
        nuevoHiddenFieldSet+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado' checked='checked'></td>";
    }else{
        nuevoHiddenFieldSet+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado'></td>";
    }
    return nuevoHiddenFieldSet;

}

function crearNuevaRow(){

    var nuevaRow="";

    nuevaRow+="<td><input type='hidden' value=''></td>";

    nuevaRow+="<td><input name='anio' value=''/></td>";

    nuevaRow+="<td><input name='anio' value=''/></td>";

    nuevaRow+="<td><input name='quincena' value=''/></td>";
//ver que ponerle en id
    nuevaRow+="<td><button value='Guardar' name='guardar_newstletter' id=''>Guardar</td>";

    nuevaRow+="<td></td>";
    //ver que ponerle en id
    nuevaRow+="<td><input type='checkbox' id='' name='publicado'></td>";

    return nuevaRow;

}

//muestra los elementos del listado que se trae de la base de datos

function mostrarElementosViewMode(elem){

    var elemento;

    elemento+="<td><input type='hidden' value='"+elem.id+"'></td>";

    elemento+="<td>"+elem.anio+"</td>";

    elemento+="<td>"+elem.mes+"</td>";

    elemento+="<td>"+elem.quincena+"</td>";

    elemento+="<td><button id='editar_"+elem.id+"' value='Editar' onclick='muestraEditarFields(\""+elem.id+"\")'>Editar</td>";

    elemento+="<td><button id='eliminar_newsletter_"+elem.id+"' value='Eliminar'>Eliminar</td>";

    if(elem.publicado == 1){
        elemento+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado' checked='checked'></td>";
    } else {
        elemento+="<td><input type='checkbox' id='publicado_"+elem.id+"' name='publicado'></td>";
    }

    return elemento;

}

});

onClick() Javascript function not being recognized, ReferenceError: function is not defined, using document Ready

onClick() Javascript function not being recognized, ReferenceError: function is not defined, using document Ready

javascript

jquery

jquery-events