OpenCart 1.5.6.4处理checkout.tpl上的点击事件(带输入选择的新发货方法)

时间:2014-10-01 13:59:56

标签: javascript jquery event-handling opencart

我在OpenCart 1.5.6.4文件目录/ view / theme / default / template / checkout / checkout.tpl中编辑,尝试使用select元素处理我的新发货方法中的点击事件。我需要在点击选择元素#bmat_data后选中id#bmat.bmat的单选按钮。

这部分代码通过目录/ view / theme / default / template / checkout / shipping_method.tpl中的ajax加载到checkout.tpl

<div id="shipping-method">
  <div class="checkout-heading">Step 4: Shipping</div>
  <div class="checkout-content">
    ...
    <tr class="highlight">
     <td><input type="radio" name="shipping_method" value="bmat.bmat" id="bmat.bmat"></td>
     <td>
       <label for="bmat.bmat">BMat</label>
       <select name="bmat_data" id="bmat_data">
         <option value="0">---</option>
         <option value="1">A</option>
         <option value="2">B</option>
       </select>
     </td>
     <td style="align:right;"><label for="bmat.bmat">some price</label></td>
    ...
  </div>
</div>

在以<script type="text/javascript"><!--开头的行后的文件checkout.tpl中,我插入了这个jquery代码来处理它。

$('#bmat_data').click( function() {
    $('#bmat\\.bmat').prop('checked',true);
});

单击选择元素单选按钮未选中,我无法解决原因。如果我在单独的文件中编写simmilar代码它可以工作,但在OC中的checkout.tpl文件中没有。 有人可以帮忙吗?

2 个答案:

答案 0 :(得分:0)

我尝试另一种方式将jquery代码直接插入select元素并且它可以工作。有谁知道为什么它以这种方式工作而且之前没有?

<select name="bmat_data" id="bmat_data" onclick="$('input#bmat\\.bmat').prop('checked', true);">

答案 1 :(得分:0)

我已经解决了。加载checkout.tpl时,我想处理的元素不存在(只有基础结构)。这些元素后来通过ajax注入。当我将jquery代码移动到注入文件shipping_method.tpl时,它可以正常工作。

<div id="shipping-method">
  <div class="checkout-heading">Step 4: Shipping</div>
  <div class="checkout-content">
    ...
    <tr class="highlight">
     <td><input type="radio" name="shipping_method" value="bmat.bmat" id="bmat.bmat"></td>
     <td>
       <label for="bmat.bmat">BMat</label>
       <select name="bmat_data" id="bmat_data">
         <option value="0">---</option>
         <option value="1">A</option>
         <option value="2">B</option>
       </select>
     </td>
     <td style="align:right;"><label for="bmat.bmat">some price</label></td>
    ...
  </div>
</div>
<script>
  $('#bmat_data').click( function() {
      $('#bmat\\.bmat').prop('checked',true);
  });
</script>
});