jQuery.each는 Safari에서 작동하지 않습니다.

Question

jQuery 스크립트와 Safari (Mac + iPhone)에 문제가 있습니다. 내 필요에 맞게 수정하려면 그들을 쓰기, 내가 다음 스크립트로 보내기 전에 데이터를 수정해야 할 때, 나는 양식 (serializeArray)을 모두 읽어

: 이 페이지의 구조 새 양식 (표시 : 없음)을 선택하고 다음 페이지로 보냅니다. 이것은 스크립트입니다

$("input#newsubmit").click(function(e) { 
    e.preventDefault(); 
    arraytix = []; 
    checkboxStatus = 0; 
    $("input[id^=field]").each(function(i) { 
     if ($(this).val() != 0) { 
       arraytix[i] = $(this).attr('name') + ":" + $(this).val() + ":" + $(this).parent().parent().find("li.four").find("input[id*=price_item]").val() + ":" + $(this).parent().parent().find("li.five").find("input[id*=vvk_item]").val(); 
     } 
    }); 

    var carttix = ''; 
    jQuery.each(arraytix, function(i) { 
     if (arraytix.hasOwnProperty(i)) { 
      if (i == arraytix.length - 1) { 
       carttix += this; 
      } else { 
       carttix += this + '-'; 
      } 
     } 
    }); 

    $("form#finalSubmit").append('<input name="cart" value="'+carttix+'" />'); 
    $("form#finalSubmit").append('<input name="versand" value="'+$("select#item_vat_1").val()+'" />'); 
    $("form#finalSubmit").append('<input name="barzahlung" value="'+checkboxStatus+'" />'); 
    if (checkboxStatus == 0) { 
     var fields = $("fieldset.customer").serializeArray(); 
     alert("before each"); 
     jQuery.each(fields, function(i, field){ 
      $("form#finalSubmit").append('<input name="'+field.name+'" value="'+field.value+'" />'); 
      alert("loop"); 
     }); 
     alert("after jquery.each"); 
    } 
    //$("form#finalSubmit").submit(); 
} 

jQuery.each의 첫 번째 인스턴스가 모든 브라우저와 plattforms에 기대 작품으로. append 명령을 사용하는 jQuery.each의 두 번째 인스턴스는 모든 플랫폼에서 Safari에서 실행되지 않습니다.

디버깅을 위해 몇 가지 경고를 추가했습니다. Safari가 설치된 Mac : 경고 ("before each") 및 경고 ("after each")가 실행됩니다. jQuery.each doens't. 다른 브라우저 (Firefox Mac 포함)에는 아무런 문제가 없습니다. 첫 번째 경고, 일부 경고 ("루프") 및 마지막 경고가 발생해야합니다.

무엇이 문제입니까?

Answer 1

serializeArray()은 일반적으로 실제 form 또는 입력 요소에서만 작동하도록되어 있습니다. 지금은 기본적으로 fieldset을 직렬화하도록 요청하려고합니다. 에 serializeArray() 라인을 변경해보십시오 :

var fields = $("fieldset.customer :input").serializeArray(); 

난 당신이뿐만 아니라 명확이 코드를 꽤 할 수 있다고 생각합니다. 조사 및/또는 학습해야한다고 생각하는 메모를 추가했습니다. 적어도 내가 볼 수는 없지만 언급 한 브라우저에서 작동해서는 안되는 jQuery와 같은 것이 없습니다. 나뿐만 아니라 아래의 코드에 상기 변경 한 :

$("#newsubmit").click(function(e) { // just the ID is faster than including the element type 
    e.preventDefault(); 

    var arraytix = [], // added "var" to stay in local scope 
     checkboxStatus = 0; // where does this get set? It's always 0 

    $("input[id^=field]").each(function() { // you don't need 'i' anymore 
     // find some things up front so you're not asking jQuery to 
     // find them over and over again 
     var $this = $(this), 
      $grandParent = $this.parent().parent(), 
      val = $this.val(); 

     if (val !== "0") { // val() usually returns a string 
       // use push() to avoid creating a sparse array 
       arraytix.push([ 
        $this.attr('name'), 
        val, 
        $grandParent.find("li.four").find("input[id*=price_item]").val(),  
        $grandParent.find("li.five").find("input[id*=vvk_item]").val() 
      ].join(':')); // forget about adding those colons manually 
     } 
    }); 

    // join the entries with a hyphen 
    var carttix = arraytix.join('-'); 

    // append your elements; jquery doesn't need you to close your tags 
    var $form = $('#finalSubmit'); // again, no element type in selector 
    // chain calls where you can 
    $form 
     .append('<input name="cart" value="'+carttix+'">') 
     .append('<input name="versand" value="'+$("#item_vat_1").val()+'">') 
     .append('<input name="barzahlung" value="'+checkboxStatus+'">'); 

    // This is always 0 -- are you setting it somewhere else? 
    if (checkboxStatus == 0) { 
     // serializeArray is only supposed to work on actual input elements 
     // adjusted below: 
     var fields = $("fieldset.customer :input").serializeArray(); 
     console.log("before each"); 
     // Make sure fields is in the format you're expecting 
     console.log(fields); 
     $.each(fields, function() { 
      $form.append('<input name="'+this.name+'" value="'+this.value+'">'); 
      console.log("loop"); 
     }); 
     console.log("after jquery.each"); 
    } 

    //$form.submit(); 
} 

나는 console.log에 alert의 변경. Firebug 또는 Chrome 콘솔 (대부분의 브라우저에서 F12 키를 눌러 콘솔을 열 수 있음)과 같은 적절한 디버깅 도구에서 실제 요소를 검사 할 수 있습니다.