Question

我正在构建一个交互式表单，并根据用户给出的答案通过ajax注入新问题。

我的问题是看起来注入的html对JQuery是不可见的。

如您所见[{3}}，点击功能在注入的HTML中不起作用。

//pesquisa1.js
$('a.continuar_r').live('click',function(event) {
    var id_p=$('input:radio:first').attr('name');
    var v_r=$('input:radio:checked').val();
    alert(v_r);
    if (!v_r) $('#update_p').hide().text('Ops! Selecione uma opção').fadeIn('slow');
    else {
        $('#update_p').hide();
        var fieldset=$(this).closest('fieldset');
        fieldset.hide();
        fieldset.nextAll('fieldset:first').fadeIn('slow');

        $.post(
            'pesquisa1.php',
            { id_p:id_p, v_r:v_r },
            function(data){
                //alert('Retorno:\n' + data);
                $('#status_p').hide();
                $('form').append($(data).hide().fadeIn('slow'));
                $('label').css('display','block');
            }
        );
    }

});

顺便说一句，“id_p”是问题的id，“v_r”是答案的值（选择的选项或书面答案）。

现在HTML：

//pesquisa1.htm
<form id="form_p" action="">

    <input type="hidden" id="origem_p" value="">
    <input type="hidden" id="proposito_p" value="">

    <fieldset class="p_satisfeito">
        <legend>Você está satisfeito com os seus resultados atuais?</legend>
        <label for="for_s"><input type="radio" id="for_s" name="p_satisfeito" value="s">Sim</label>
        <label for="for_n"><input type="radio" id="for_n" name="p_satisfeito" value="n">Não</label>
        <a class="continuar_r">Continuar &rarr;</a>
    </fieldset>

    <small id="update_p"></small> <span id="status_p"></span>

</form>

我在这里展示了一个非常简化的PHP代码版本，它是一种交互式表格。

//pesquisa1.php
<?
echo<<<FORM
<label for="for_y1"><input type="radio" id="for_y1" name="p_satisfeito1" value="ohy">Oh, Yes!</label>
<label for="for_n1"><input type="radio" id="for_n1" name="p_satisfeito1" value="ohn">Oh, No!</label>
<a class="continue_r">Continue &rarr;</a>
FORM;
?>

看起来我无法使用已经加载的javascript与刚刚加载的新html进行交互...

修改

如果我在我的php中插入一些javascript，魔法会回来，但我仍然无法访问第一页加载中声明的变量。

//form.php//
<?
echo<<<FORM
<label for="for_y1"><input type="radio" id="for_y1" name="p_satisfeito1" value="ohy">Oh, Yes!</label>
<label for="for_n1"><input type="radio" id="for_n1" name="p_satisfeito1" value="ohn">Oh, No!</label>
<a class="continue_r">Continue &rarr;</a>
<script>
    $('a.continue_r').click(function(event) {
        alert('Hi!');
        var id_p=$('input:radio:first').attr("name")
        alert('id_p');
    });
</script>
FORM;
?>

谢谢！

Answer 1

您没有在任何地方注入从POST请求返回的数据，因此没有人知道它。你可以这样做：

$.post('form.php', {params...}, function(html) {
  $('body').append(html);
  // Now it's in the DOM, you can access it.
}, "text");

Answer 2

我认为这是一个替代和范围的问题。您正在使用发回的内容替换#stage的html，然后您尝试通过DOM获取id_p，但您刚刚替换了该内容。另外，我猜你原本打算使用id_p和v_r，因为它们被声明但从未使用过。因为这些变量是在函数中声明的，所以当你需要它们时它们将无法使用。您需要在更高的范围内声明它们。

最后我注意到在form.php中，你试图获取一个元素的名称，但是你要在同一个文件中设置元素。你真的需要这个名字吗？

还有一件事。我的猜测是你试图收集对一系列问题的回答，这些问题通过ajax单独加载，对吧？ ...如果您有两个以上的问题，请考虑将响应放在一个数组中。

试试这个：

new html：

<script type="text/JavaScript"> 

  var responses = [];

  $(document).ready
  (
    function()
    {
      loadPergunta();
      $("a.continuar").click
      (
        function()
        {
          var response  = $("#pergunta input:checked").val();
          if(typeof(response)=="undefined") response = $("#pergunta input").val();
          alert(response);
          responses[responses.length] = response;
          loadPergunta(responses.length+1);
        }
      );
    }
  );

  function loadPergunta(id)
  {
    if(typeof(id)=="undefined") id = 1;
    $('#stage').fadeOut('slow');
    $.post(
      'pergunta.php',
      {id: ""+id},
      function(data) {
        if(data.toLowerCase().indexOf('input')==-1)
        {
          $("a.continuar").fadeOut("slow");
        }
        $('#pergunta').html(data).fadeIn('slow');
      }
    );
  }

</script>


<div id="box">
  <fieldset id="pergunta"></fieldset>
  <a class="continuar">Continuar &rarr;</a>
</div>

和pergunta.php：

<?php

  $p_id = (int)($_POST['id']);

  $perguntas = array
  (
    1 => array
    (
      'type' => 's_ou_n',
      'text' => 'Você está satisfeito com os seus resultados atuais?'
    ),
    array 
    (
      'type' => 's_ou_n',
      'text' => 'Você recommendará nossos servicos aos seus amigos?' 
    ),
    array
    (
      'type' => 'text',
      'text' => 'Algo mais que quer compartilhar?'
    )
  );

  $content = '';

  if($p_id<=count($perguntas)) 
  {
    if($perguntas[$p_id]['type']=='s_ou_n')
    {
      $content = '<div class="pergunta-text">'.$perguntas[$p_id]['text']."</div>\n";
      $content .=
      '
      <input type="radio" id="p_'.$p_id.'_s" name="p_'.$p_id.'" value="s"><label for="p_'.$p_id.'_s">Sim</label>
      <input type="radio" id="p_'.$p_id.'_n" name="p_'.$p_id.'" value="n"><label for="p_'.$p_id.'_n">Nao</label>
      ';
    }
    else
    {
      $content =
      '
        <label for="p_'.$p_id.'" class="pergunta-text">'.$perguntas[$p_id]['text'].'</label> <input type="'.$perguntas[$p_id]['type'].'" id="p_'.$p_id.'" name="p_'.$p_id.'" ></input>
      ';
    }
  }
  else $content = 'Obrigado pela participação!';

  echo $content;
?>

Answer 3

尝试使用jQuery live方法！

// // form.js

$(document).ready(function() {
  $('a.continue_r').live("click",function(event) {
    var id_p=$('input:radio:first').attr("name")
    var v_r=$('input:radio:checked').val();
    $.post(
        'form.php',
        { id_p:id_p, v_r:v_r },
        function(data) {
            alert('Return:\n' + data);
            $('#stage').html(data).fadeIn('slow');
            $('#stage').css('display','block');
            $('label').css('display','block');
        }
    );
  });
});

希望它会奏效。

JQuery：通过ajax将html注入DOM的最简单方法是什么？

3 个答案: