2011-07-15 13 views
0

タグは$ .each()です。タグ<a>をクリックした後、ページがリフレッシュされ、appendToが機能しないのはなぜですか?

$('.auto_complete').keyup(function() { 
       var id = '#' + this.id; 
       var alt = $(id).attr('alt'); var id = $(this).attr('id'); var name = $(this).attr('name'); 
       var url = alt + id + '/' + name; 
      var dataObj = $(this).closest('form').serialize(); 
      $.ajax({ 
       type: "POST", 
       url: url, 
       data: dataObj, 
       cache: false, 
       dataType: 'json', 
       success: function (data) { 
        $(".list_name").show().html('');    
        $.each(data.name, function(a,b){ 
         $(".list_name").append('<p><a href="" id="result">' + b + '</a></p>'); 
    ////////////////////here///////////////////// 
         $('.list_name p a').live('click', function(e) { 
            e.preventDefault(); 
            $('<b>' + b + '، </b><input type="text" name="hotel[]" value="' + b + '" style="border: none; display: none;" />').appendTo('.auto_box span'); 
            $(this).remove(); 
           return false; 
           }); 
    ///////////////////////////////////////////// 
        }); 
        if($('.auto_complete').val()==''){ 
         $(".list_name p").hide().remove() 
        } 
        $('body').click(function(){ 
          $(".list_name p").hide().remove(); 
          $('.auto_complete').val(''); 
         }); 
       }, 
       "error": function (x, y, z) { 
        // callback to run if an error occurs 
        alert("An error has occured:\n" + x + "\n" + y + "\n" + z); 
       } 
       }); 

      }); 

PHP:私のjsのコードを参照してください(私はCodeIgniterのを使用)を使用すると、解決策は、あなたがイベントの面であなたのリンクに接続している他の何に依存する場合がありますアプローチ方法

function search_hotel(){ 
      $search_term = $this->input->post('search_hotel'); 
      $query = $this->db->order_by("id", "desc")->like('name', $search_term)->get('hotel_submits'); 
      $data = array(); 
      foreach ($query->result() as $row) 
      { 
       $data[] = $row->name; 
      } 
      echo json_encode(array('name' => $data)); 
    // echo: {"name":["333333","\u0633\u0644","\u0633\u0644\u0627\u0633\u06cc","\u0633\u0644\u0627\u0633\u0633","\u0633\u0644\u0627\u0645"]} 
     } 
+0

あなたは何が起こると予想されているか、あなたが観察した間違った行動をより詳細に伝えることができますか? –

+0

私は答えを – corbacho

答えて

2

$('.list_name p a').live('click', function() { 
    $('<b>' + b + '، </b><input type="text" name="hotel[]" value="' + b + '" />').appendTo('.auto_box span'); 
    $('.list_name p a').remove(); 
    return false; 
}); 

私はうまく動作しているようだjsFiddle for an exampleを、作成した:私の代わりにこのようにそれをしようとするだろう。依然としてフォーム提出を取得している場合は、コードやその他の要素に結びついている構文エラーが、目的の動作が妨げられたり妨げられたりする可能性があります。

+0

で追加しました。「.list_name p a」ページの更新をクリックした後で? – user846198

+1

'event.preventDefault();'は、デフォルトの動作を停止するのに十分です。また、 'return false'も動作しますが、イベントのバブリングを停止するので、私はそれをお勧めしません。 – corbacho

+0

'b'とは何ですか、いつ設定されますか?問題の原因となっている実行時エラーが発生する可能性があります。 –

2

イベントが添付されていないためです。どうして?それをデバッグする必要があります...あなたのブラウザのJavascriptコンソールにエラーがありますか?何らかのエラーが原因で解析が中止された可能性があります。

たぶん、あなたはなど...右の要素(LIST_NAMEまたはリスト名)を選択していない

UPDATE
あなたはjQueryのどのバージョンを使用していますか?
イベントのバインドを、AJAX呼び出しのテストの外に置くことができます。あまりにもうまくいくはずです。
親の.list_nameにもアタッチすることができます。イベントはバブルアップするので、このように効率的です。 コンソールログにエラーがありますか?

0

この

$('.list_name p a').live('click', function(e) { 
          e.preventDefault(); 

するvar B = "defineIt" を試してみてください。 $( '' + b + '、').appendTo( '。auto_box span'); $(this).remove(); falseを返します。 });

+0

問題は解決されませんでした。まだ更新ページです。私は何をしますか? – user846198

+0

私はどこに問題があるかを見ています。 bはどこに定義されていますか?これはページがリフレッシュされるためにb idが未定義であるため、jsエラーをスローしています。関数にb = somethingを定義して試してください。私は私の答えを見て編集しました。 – ShankarSangoli

+0

bはここで定義されています。 '$ .each(data.name、function(a、b)' $ .each – corbacho

関連する問題