Tengo un modal que usa Math.random para generar identificadores aleatorios.

    function new_modal(head, content, button){

    var random = Math.floor(1000 + Math.random() * 9000);

    var modal_html = '<div id="myModal_'+ random +'">' +
     '<div id="outer">' +
      '<div id="inner">' +
       '<div id="top">'+head+'</div>' +
        '<span class="bOk"><img class="btnClose" src="#"></span>' +
       '<div class="modalCnt">'+content+'</div>' +
       button +        
      '</div> <!-- Inner -->' +
     '</div> <!-- Outer -->' +
    '</div>';

    $('body').append(modal_html);
  // Close the Modal
    $('#myModal_'+ random +' span').on('click', closeFunction);
    return 'myModal_' + random;  

}

Y tengo una función cercana, pero cuando eso se ejecuta me da "aleatorio no está definido", cuando se ejecuta el código bajo alerta (es cierto). ¿Porqué es eso? Cuando el código se encuentra debajo de la función new_modal, funciona perfectamente, pero cuando lo pongo fuera de esa función y en su propia función no funciona.

    function closeFunction() {
    var check = $(this);
        if(check.hasClass("bOk") || check.hasClass("btnText") === true) {
            alert("It's true");
            $(this).closest('#myModal_'+ random).hide();
        } 
        else {
            alert("It's false, do something else");
            return false
            }
}
0
hbrovell 27 oct. 2017 a las 15:33

3 respuestas

La mejor respuesta

Como vicbyte señaló, esto es una cuestión de alcance, {{X0} } existe solo dentro de la función new_modal, por lo que no se puede acceder fuera de esta función. Puede incrustar su función directamente dentro de la llamada .on de esta manera:

function new_modal(head, content, button) {

  var random = Math.floor(1000 + Math.random() * 9000);

  var modal_html = '<div id="myModal_' + random + '">' +
    '<div id="outer">' +
    '<div id="inner">' +
    '<div id="top">' + head + '</div>' +
    '<span class="bOk"><img class="btnClose" src="#"></span>' +
    '<div class="modalCnt">' + content + '</div>' +
    button +
    '</div> <!-- Inner -->' +
    '</div> <!-- Outer -->' +
    '</div>';

  $('body').append(modal_html);

  // Close the Modal
  $('#myModal_' + random + ' span').on('click', function() {
    var check = $(this);
    if (check.hasClass("bOk") || check.hasClass("btnText") === true) {
      alert("It's true");
      $(this).closest('#myModal_' + random).hide();
    } else {
      alert("It's false, do something else");
      return false
    }
  });

  return 'myModal_' + random;
}

Prefiero este enfoque en lugar de la variable global, ya que no contamina el alcance global y le permite abrir varios modales al mismo tiempo.

Pero como necesita poner esta función afuera, cree un cierre como este:

function new_modal(head, content, button) {

  var random = Math.floor(1000 + Math.random() * 9000);

  var modal_html = '<div id="myModal_' + random + '">' +
    '<div id="outer">' +
    '<div id="inner">' +
    '<div id="top">' + head + '</div>' +
    '<span class="bOk"><img class="btnClose" src="#"></span>' +
    '<div class="modalCnt">' + content + '</div>' +
    button +
    '</div> <!-- Inner -->' +
    '</div> <!-- Outer -->' +
    '</div>';

  $('body').append(modal_html);

  // Close the Modal
  $('#myModal_' + random + ' span').on('click', function () {
    closeModal($(this), random);
  });

  return 'myModal_' + random;
}

function closeModal(element, random) {
  var check = element;
  if (check.hasClass("bOk") || check.hasClass("btnText") === true) {
    alert("It's true");
    check.closest('#myModal_' + random).hide();
  } else {
    alert("It's false, do something else");
    return false
  }
}
0
Serge K. 2 nov. 2017 a las 08:38

Puedes usar así

 var random="";
 function new_modal(head, content, button){

     random = Math.floor(1000 + Math.random() * 9000);

    var modal_html = '<div id="myModal_'+ random +'">' +
     '<div id="outer">' +
      '<div id="inner">' +
       '<div id="top">'+head+'</div>' +
        '<span class="bOk"><img class="btnClose" src="#"></span>' +
       '<div class="modalCnt">'+content+'</div>' +
       button +        
      '</div> <!-- Inner -->' +
     '</div> <!-- Outer -->' +
    '</div>';

    $('body').append(modal_html);
  // Close the Modal
    $('#myModal_'+ random +' span').on('click', closeFunction);
    return 'myModal_' + random;  

}

function closeFunction() {
    var check = $(this);
        if(check.hasClass("bOk") || check.hasClass("btnText") === true) {
            alert("It's true");
            $(this).closest('#myModal_'+ random).hide();
        } 
        else {
            alert("It's false, do something else");
            return false
            }
}
0
Jinesh 27 oct. 2017 a las 12:37

Se llama alcance variable. :) Si declara una variable (usando la palabra clave var) dentro de una función, no será accesible en otra. Si desea utilizar el mismo azar en ambas funciones, declarelo globalmente (antes de las funciones) o páselo a través de argumentos.

https://www.w3schools.com/js/js_scope.asp

2
vicbyte 27 oct. 2017 a las 12:36