jQuery function not working inside a modal

时间:2018-03-25 20:15:02

标签: jquery zurb-foundation zurb-foundation-6

I am using Foundation reveal modal with id="sizesModal" that contains user inputs which are supposed to be previewed under Sizes & Qty Preview when submitted with "save" button

There is a function inside footer that is called updateSizes

 function updateSizes() {
 var sizeString = '';
 for (var i=1;i<=12;i++){
  if(jQuery('#size'+i).val() != ''){
    sizeString +=  jQuery('#size'+i).val()+':'+jQuery('#qty'+i).val()+',';
      }
  }
  jQuery('#sizes').val(sizeString);
}

inside my reveal modal div on products.php , there is a button for submitting

 </button>
 <button class="button" data-toggle="modal" data-target="#sizesModal" click="updateSizes();jQuery('#sizesModal').modal('toggle');return false;"> Save Changes
 </button>

I am not getting any console messages, but the button is not outputting anything into Sizes & Qty Preview

I have included all the scripts from foundation and the footer page

2 个答案:

答案 0 :(得分:0)

我认为您必须检查if语句是否已执行。我认为.Val()可能会返回别的东西。

答案 1 :(得分:0)

我通过将id应用于按钮“saveChangesSizes”而不是在产品页面中以这种方式执行脚本来找到解决方案

$("#saveChangesSizes").click(function(){
console.log("1");
var velicine="";
var niz=new Array();
for(var i=1; i<=12;i++){
    if($("#size_" + i).val()!=""){
        niz.push({size: $("#size_" + i).val(), qty: $("#qty_" + i).val()});
        velicine+=$("#size_" + i).val() + ":" + $("#qty_" + i).val() + ",";
    }
}
console.log(niz);
if(velicine.length>0){
    velicine=velicine.substring(0,velicine.length-1);
}
$("#qtyandsizes").val(JSON.stringify(niz));

$("#size").val(velicine);
 $("#sizesModal").foundation("close");
 return false;
});