¿Como puedo insertar un script en una cadena string?

Quiero crear unas pestañas a partir de unos datos consultados en la base de datos, en cada pestaña tendrá unos checkbox los cuales quiero que tengan una acción onChange pero no puedo insertar la etiqueta script en una cadena string

function GenerarPestanias() {
        var pestanias = '';
        return pestanias;
    }

Al finalizar la etiqueta del script me lanza error.

No se si es la manera correcta, si hay otra y mejor, bienvenida sera.

Actualización 1:

Quisiera que cada checkbox contenga algo como esto:

    $('#checkbox').on("change", function(){
        if($(this).prop("checked") == true){
             alert(true);
        }else{
             alert(false);
        }
    });

Actualización 2:

No explique bien lo que quiero que haga cada checkbox, pues como dije arriba creo pestañas con bootstrap ( como acá ) a partir de una consulta a la BD, la tabla se compone de la siguiente manera:


CREATE TABLE public.funciones
(
  id integer NOT NULL DEFAULT nextval('funciones_id_seq'::regclass),
  id_padre integer NOT NULL,
  icono character varying(255) NOT NULL,
  link character varying(255) NOT NULL,
  titulo character varying(255) NOT NULL,
  status boolean NOT NULL
)

Los que contienen id_padres = 0 son las pestañas, las que contengan id_padres > 0 son hijos los cuales quiero que aparezcan dentro del contenido de cada pestaña también como checkbox.

Acá un ejemplo de una consulta (typo json) a la tabla



todoFunciones = 
            [
            {
              "id": 1,
              "id_padre": 0,
              "icono": "fa fa-dashboard fa-fw",
              "link": "/",
              "titulo": "Tablero",
              "status": true
          },
          {
              "id": 2,
              "id_padre": 0,
              "icono": "fa fa-tasks fa-fw",
              "link": "#",
              "titulo": "Procesos",
              "status": true
          },
          {
              "id": 3,
              "id_padre": 2,
              "icono": "fa fa-list-ol fa-fw",
              "link": "/lotes",
              "titulo": "Lotes",
              "status": true
          },
          {
              "id": 4,
              "id_padre": 2,
              "icono": "fa fa-eraser fa-fw",
              "link": "/limpieza",
              "titulo": "Limpieza",
              "status": true
          },
          {
              "id": 5,
              "id_padre": 2,
              "icono": "fa fa-stop fa-fw",
              "link": "/paradas",
              "titulo": "Paradas",
              "status": true
          },
          {
              "id": 6,
              "id_padre": 2,
              "icono": "fa fa-wrench fa-fw",
              "link": "#",
              "titulo": "Mantenimiento",
              "status": true
          }
          ]
          ;

1
задан 20.12.2016, 01:43
3 ответа

И потому что ты не просто создаешь один onChange Для класса твоих inputs:

$(document).ready(function(){

  $('.checkbox').bind('change', function() {
    /*if($(this).prop("checked") == true){
      alert(true);
    }else{
      alert(false);
    }*/
    if($(this).data("tipo")=="tipo1"){
      alert("tipo 1");
    }else if($(this).data("tipo")=="tipo2"){
      alert("tipo 2");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox" data-tipo="tipo1">
<input type="checkbox" class="checkbox" data-tipo="tipo2">
1
ответ дан 24.11.2019, 11:59
  • 1
    Обновите вопрос, из-за которого не делать это с классом или on один пойдите –  Pablo Contreras 20.12.2016, 01:49
  • 2
    Ты можешь добавлять atribrutos custom твои checkbox и читать их внутри change класса, чтобы так дифференцировать их. –  sioesi 20.12.2016, 01:52
  • 3
    Другое, которое ты можешь делать, состоит в том, чтобы давать этот урок checkbox только! –  sioesi 20.12.2016, 02:02
  • 4
    но если я хочу способствовать тому, чтобы у каждого checkbox были различные функции, ¿ как он сделал бы? –  Pablo Contreras 20.12.2016, 02:18
  • 5
    Обновите @PabloContreras –  sioesi 20.12.2016, 02:25

Поскольку кажется, что checkboxes создаются динамическим способом с JavaScript/jQuery, что ты можешь делать, состоит в том, чтобы присоединять уполномоченные события, которые будут ассоциироваться с элементами, так скоро будьте созданы и добавлены DOM.

Ты можешь читать больше о событиях, уполномоченных в документации jQuery для .on() (на английском). Где он объясняется (мой перевод):

У уполномоченных событий есть преимущество, которого они могут обрабатывать события потомков, которые добавились к документу в последующем моменте. Выбрав элемент, который гарантирует, что он будет, представь в моменте, который присоединяет к себе драйвер уполномоченного события, ìedes isar события, уполномоченные, чтобы предотвращать необходимость присоединять и снимать драйвер событий часто. Этот элемент должен бы быть элементом контейнером вида в рисунке Modelo-Vista-Controlador, например, или document если драйвер evneto хочет мониторировать все события, которые появляются в документе. Элемент document будь доступен в head документа перед тем, как не загружать никакого HTML, а следовательно это самая безопасная пара, присоединять события, не будучи должен надеяться на то, что документ готов.

Так формат ассоциации был бы чем-то как это (например для click):

$( "selector-de-un-ancestro" ).on( "click", "selector-del-elemento-objetivo", function() {
   // acciones a ejectura al hacer click
});

В твоем особенном случае, что ты сделал бы, состоит в том, чтобы оставлять код точно равным, как это у тебя есть, и вне ссылки реализовывать ассоциацию уполномоченных событий. Зная, что предок будет body ты мог бы делать что-то как это:

Ощутись, что пока более наверху / начальник был предком, менее работоспособной будет ассоциация; он рекомендуемый способствовать тому, чтобы предок был самым конкретным

$("body").on("click", "input[type='checkbox']", function() {
  if($(this).prop("checked") == true){
    alert(true);
  }else{
    alert(false);
  }
});

function GenerarPestanias() {
  var pestanias = '<ul class="nav nav-tabs" role="tablist">';
  $.each( todoFunciones, function( i, j ){
    if(i!=0){
      if(j.id_padre==0){
        var ident = j.titulo.toLowerCase().replace(/\s/g,'');

        $.each( todoFunciones, function( x, y ){
          if(y.id_padre==j.id){
          }
        });
        pestanias += ''+
          '<li><a href="#'+ident+'" data-toggle="tab" aria-expanded="true">'+j.titulo+' '+
          '<input id="menu_'+ident+'" name="menu_'+ident+'" data-info="general" name="my-checkbox" type="checkbox"  data-toggle="toggle" data-on="<span class=\'fa fa-power-off\'></span>" data-off="<span class=\'fa fa-power-off\'></span>" data-onstyle="success" data-offstyle="danger">'+
          '</a>'+
          '</li>'; // eliminé las etiquetas script
      }
    }
  });
  pestanias += '</ul>';
  return pestanias;
}
0
ответ дан 24.11.2019, 11:59

если то, что ты хочешь, он состоит в том, чтобы производить одни pestaГ±as используя ее informaciГіn базы данных, и который каждый pestaГ±a содержал checkbox с eventListener каждым, тогда здесь я оставляю тебе пример, я не дал стили checkbox.

Здесь HTML:

        <!-- Nav tabs -->
        <ul id="pestañas" class="nav nav-tabs" role="tablist">
            <!--<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>-->
        </ul>

        <!-- Tab panes -->
        <div id="contenido" class="tab-content">
           <!-- <div role="tabpanel" class="tab-pane active" id="home">Home</div>
            <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
            <div role="tabpanel" class="tab-pane" id="messages">Messages</div>
            <div role="tabpanel" class="tab-pane" id="settings">Settings</div>-->
        </div>

    </div>

Восток - JSON, который он использует:

[{
                "id": 1,
                "id_padre": 0,
                "status": true,
                "link": "#home",
                "titulo": "Home"
            },
            {
                "id": 2,
                "id_padre": 0,
                "status": true,
                "link": "#profile",
                "titulo": "Profile"
            },
            {
                "id": 3,
                "id_padre": 0,
                "status": true,
                "link": "#messages",
                "titulo": "Messages"
            }]

javascript:

var pestañas = document.querySelector('#pestañas'),
            contenido = document.querySelector('#contenido'),
            primera = true,
            tf = [{
                "id": 1,
                "id_padre": 0,
                "status": true,
                "link": "#home",
                "titulo": "Home"
            },
            {
                "id": 2,
                "id_padre": 0,
                "status": true,
                "link": "#profile",
                "titulo": "Profile"
            },
            {
                "id": 3,
                "id_padre": 0,
                "status": true,
                "link": "#messages",
                "titulo": "Messages"
            }];

        function generarPestañas(callback){
            for(var i=0, objeto; objeto=tf[i]; i++){
                if(objeto.id_padre == 0){
                    var pestaña_actual = generarPestaña(primera, objeto.link, objeto.titulo, function(){
                        if(this.checked == true){
                            alert('true');
                        }
                        else{
                            alert('false');
                        }
                    });
                    pestañas.appendChild( pestaña_actual );
                    primera = false;
                }
            }
            callback();
        }
        //generarPestañas();
        function generarPestaña(_primera, link, titulo, callback){
            var pestaña = document.createElement('li'),
                enlace = document.createElement('a'),
                checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            pestaña.setAttribute('role', 'presentation');
            enlace.textContent = titulo;
            enlace.setAttribute('href', link);
            enlace.setAttribute('role', 'tab');
            enlace.setAttribute('data-toggle', 'tab');
            if(_primera == true){
                pestaña.setAttribute('class', 'active');
            }
            pestaña.appendChild( enlace );
            pestaña.appendChild( checkbox );
            checkbox.addEventListener('change', function(){
                callback.call( this );
            }, false);
            return pestaña;
        }
        function iniciarPestañas(){
            generarPestañas(function(){
                $('li[role=presentation] a').click(function(e){
                    e.preventDefault();
                    $(this).tab('show');
                });
            });
        }
        iniciarPestañas();
0
ответ дан 24.11.2019, 11:59