Permítanme comenzar diciendo que sé que probablemente esta no sea la forma correcta de hacerlo, pero estoy seguro de que alguien me indicará la dirección correcta :)

Antecedentes del proyecto

Lo que estoy tratando de lograr es esto; Tengo una página de índice en mi raíz y cuatro páginas php (acerca de, contacto, ubicación y preguntas frecuentes) que residen en una carpeta llamada externa. Cuando se cargue la página de índice, se mostrarán cuatro casillas de verificación: acerca de, contacto, ubicación y preguntas frecuentes. Cuando se marca una de las casillas de verificación, un div se deslizará hacia abajo y mostrará el contenido de la página php correspondiente a través de load (). El usuario ahora tendrá la opción de agregar o eliminar elementos de la página php para personalizar y adaptar a sus necesidades. Una vez que el usuario completa la edición, simplemente hace clic en el botón hecho y php escupe otro archivo php con los cambios para que el usuario pueda descargar el archivo.

Quédese conmigo aquí :), así que básicamente la idea aquí es tener un archivo básico que el usuario pueda cambiar para adaptarse a sus necesidades y podrá descargarlo para su uso una vez que se complete la edición.

Problema

Cuando se carga la página php externa, el CSS funciona bien, pero JQuery no funciona en la página externa. Sospecho que se debe al hecho de que estoy usando un archivo JQuery que se llama en mi archivo de índice y hay algún tipo de problema de alcance cuando intento usarlo con elementos en el archivo externo. Un ejemplo sería, cuando intento acceder a un enlace dentro del contact.php, la función de consulta no funcionará. Tenga en cuenta que la página contact.php se llama a través de load ().

Archivos

Nota: Entiendo que necesito ser más descriptivo con mi convención de nomenclatura con respecto a mis divs, los archivos css es lo que me dijeron que usara y no debía hacer uno diferente :(

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CR8&#1071;</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="library/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="library/style.css" />
</head>

<body>
<div id="w">
<div id="mh"><p>CR8&#1071;</p></div>
<div id="mc">
    <div id="pc">
        <div id="h"><p>STEP 1 : Select pages to build</p><a href="#">UNCHECK ALL</a></div>
        <div id="cb-c">
            <div id="cb-c-r1">
                <form name="f">
                <ul>
                    <li><input type="checkbox" id="cb" name="index" value="index"/><label>Index Page: </label></li>
                    <li><input type="checkbox" id="cb" name="index" value="contact"/><label>Contact Page: </label></li>
                    <li><input type="checkbox" id="cb" name="index" value="about"/><label>About Page: </label></li>
                    <li><input type="checkbox" id="cb" name="index" value="calender"/><label>Calender Page: </label></li>
                    <li><input type="checkbox" id="cb" name="index" value="news"/><label>News Page: </label></li>
                </ul>
                </form> 
            </div>
            <div id="cb-c-r2">
                <form>
                <ul> 
                    <li><input type="checkbox" id="cb" name="index" value="image"/><label>Image Gallery: </label></li>
                    <li><input type="checkbox" id="cb" name="index" value="testimonials"/><label>Testimonials Page: </label></li>
                    <li><input type="checkbox" id="cb" name="index" value="faqs"/><label>Faq's Page: </label></li>
                    <li><input type="checkbox" id="cb" name="index" value="links"/><label>Links Page: </label></li>
                    <li><input type="checkbox" id="cb" name="index" value="products"/><label>Products Page: </label></li>
                </ul> 
                </form>
            </div>
        </div>   
        </div>
        <div id="pc">
               <div id="h"><p>Step 2 : Page options</p></div>
            <div id="output-container"></div>

jquery.js

$(function()
{
    $('#h a').click(function()
    {
        $('input:checkbox').removeAttr('checked');
        $('#output-container img').remove();
        $('#output-container').children().slideUp(function()
        {
            $(this).remove();
        });
    });
    $('input:checkbox').click(function()
    {
        var cb = $(this).attr('value');
        var active = false;

        $('#test-link').live('click',function()
        {
            alert('It Worked :)');
        });

        if($(this).is(':checked'))
        {
            $('#output-container').append('<div id="'+cb+'-container" class="container"><div id="container-header-'+cb+'" class="container-header"><p>'+cb+'</p></div></div>');
            $('#output-container div:first-child').css('border-top','none');
            $('#'+cb+'-container').hide().slideToggle('slow',function()
            {
                $('#container-header-'+cb).append($('<img>',{src:'graphics/add_item.png',id:'expand-'+cb}));
            });
        }
        else
        {
            $('#expand-'+cb).remove();
            $('#'+cb+'-container').slideToggle(function()
            {
                $(this).remove();
            });
         }                
         $('#container-header-'+cb).click(function()
         {        
             if(!active)
             {
                 $('#'+cb+'-container').append('<div id="option-pane-'+cb+'" class="option-pane"></div>');
                 $('#option-pane-'+cb).load('external/'+cb+'.php', function() 
                 {
                     $('#option-pane-'+cb).hide().slideToggle('slow',function()
                     {
                         $('#container-header-'+cb+' img').attr("src","graphics/remove_item.png");
                     });
                  });
                  active = true;
              }
              else
              {
                  $('#option-pane-'+cb).slideToggle('slow',function()
                  {
                      $(this).is(':visible')?$('#container-header-'+cb+' img').attr("src","graphics/remove_item.png"):$('#container-header-'+cb+' img').attr("src","graphics/add_item.png");
                  });
               }
          });
    });
});

contact.php (me agarraron un archivo para demostrarlo)

<div class="emc">
<?php
//print('testing');
?>
<label>Select Amount of Text Sections</label><br />
    <select>
    <option>Select ...</option>
    <option value="1">1 Section</option>
    <option value="2">2 Sections</option>
    <option value="3">3 Sections</option>
    <option value="4">4 Sections</option>
    </select><br /><br />
<p>Once the user selects the amount of text sections and desired contact fields, jquery will populate the amount of required header and text area sections for the user to fill-in desired text. Once complete the user will click submit jquery will post all information to a controller.php and a front-end, back-end, and MySQL file will be created.</p><br /><br />
<a href="#" id="test-link">Test Link</a>
</div>

Si necesito aclarar algo o simplemente estoy perdiendo gente por completo, avíseme y trataré de mejorar mi pregunta. Gracias de antemano por cualquier comentario :)

0
Mike 7 ene. 2012 a las 22:13
2
Tl; dr. ¿Puedes reducirlo?
 – 
Lightness Races in Orbit
7 ene. 2012 a las 22:14
- $('#test-link').click(function() ... en el archivo JQuery no funciona en mi archivo externo llamado. ¿Eso ayuda?
 – 
Mike
7 ene. 2012 a las 22:19
Hmmm ... no estoy seguro de cómo puedo decirlo de otra manera. Aplaudo :(
 – 
Mike
7 ene. 2012 a las 22:21
Necesita continuar reduciendo el problema. Esto es demasiado demasiado código para depurar un solo problema. Es casi seguro que la gran mayoría se puede abstraer. Debería terminar con un caso de prueba de 10-20 líneas. Por supuesto, para entonces probablemente habrá encontrado el problema en el proceso; se llama depuración :)
 – 
Lightness Races in Orbit
7 ene. 2012 a las 22:21
1
Sigue adelante. Si podemos ver todos los elementos del proyecto, entonces no ha reducido el problema. Debería terminar con un caso de prueba de 10-20 líneas. Este es un sitio para preguntas sobre lenguajes de programación, en lugar de un lugar de encuentro de programación en pareja. :)
 – 
Lightness Races in Orbit
7 ene. 2012 a las 22:38

1 respuesta

La mejor respuesta

La razón por la que no funciona es que la función de clic no funcionará en los elementos dom agregados después de la carga de la página. Necesita usar la función en vivo. Consulte la respuesta aquí: JQuery accede a objetos creados dinámicamente

1
Community 23 may. 2017 a las 15:29
Eso es exactamente lo que necesitaba. Tuve que ponerlo dentro del evento de clic de la casilla de verificación, pero no menos live () es lo único que funcionó. Muchas gracias :)
 – 
Mike
7 ene. 2012 a las 23:27