如何让JavaScript运行多次？

Question

编辑：这里是所有的代码jsfiddle。 https://jsfiddle.net/ypbd3fgf/2/

我正在使用这个简单的代码向父元素添加一个类，以使所选单选按钮上的文本变成粗体。但是，它只适用于页面加载。如果您选择不同的单选按钮，则新选择的按钮不会变为粗体。我认为这是因为代码只能在页面加载时运行。如何选择新的单选按钮或结账时更新它？谢谢！

<script type="text/javascript"> 
$(function() { 
     $(".ez-selected").closest('.row').addClass("bold"); 
}); 
</script> 

这是HTML。当选择单选按钮时，.ez选择的类将被添加到.ez-radio div。然后在选择不同的单选按钮时删除。当添加.ez选择的类时，需要将.bold类添加到.row div。当.ez选择的类被删除时.bold类需要从.row div中移除。

<div class="row (bold)"> 
     <input name="TXT870" type="hidden" value="Option 1"> 
     <div class="col-xs-2"> 
      <div class="ez-radio (ez-selected)"> 
       <input class="clearBorder ez-hide" name="CAG3" onclick= 
       "javascript:document.additem.CAG3QF1.value='1'; CheckPreValue(this, 2, 0);" 
       type="radio" value="870_625_0_625"> 
      </div><input name="CAG3QF1" type="hidden" value="0"> 
     </div> 
     <div class="col-xs-7"> 
      <span>Option 1</span> <input class="transparentField" name= 
      "CAG3TX1" readonly size="14" type="text" value=" - Add $5.00"> 
     </div> 
    </div> 

编辑：我添加了下面的JS代码，添加和删除.ez选定的类。我试图制作的这个新的JS只会在添加和删除下面这个其他JS代码的.ez选择的类时添加和删除粗体类。

(function($) { 
    $.fn.ezMark = function(options) { 
     options = options || {}; 
     var defaultOpt = { 
      checkboxCls: options.checkboxCls || 'ez-checkbox', 
      radioCls: options.radioCls || 'ez-radio', 
      checkedCls: options.checkedCls || 'ez-checked', 
      selectedCls: options.selectedCls || 'ez-selected', 
      hideCls: 'ez-hide' 
     }; 
     return this.each(function() { 
      var $this = $(this); 
      var wrapTag = $this.attr('type') == 'checkbox' ? 
       '<div class="' + defaultOpt.checkboxCls + '">' : 
       '<div class="' + defaultOpt.radioCls + '">'; 
      if ($this.attr('type') == 'checkbox') { 
       $this.addClass(defaultOpt.hideCls).wrap(wrapTag) 
        .change(function() { 
         if ($(this).is(':checked')) { 
          $(this).parent().addClass(
           defaultOpt.checkedCls); 
         } else { 
          $(this).parent().removeClass(
           defaultOpt.checkedCls); 
         } 
        }); 
       if ($this.is(':checked')) { 
        $this.parent().addClass(defaultOpt.checkedCls); 
       } 
      } else if ($this.attr('type') == 'radio') { 
       $this.addClass(defaultOpt.hideCls).wrap(wrapTag) 
        .change(function() { 
         $('input[name="' + $(this).attr(
          'name') + '"]').each(
          function() { 
           if ($(this).is(
            ':checked')) { 
            $(this).parent().addClass(
             defaultOpt.selectedCls 
            ); 
           } else { 
            $(this).parent().removeClass(
             defaultOpt.selectedCls 
            ); 
           } 
          }); 
        }); 
       if ($this.is(':checked')) { 
        $this.parent().addClass(defaultOpt.selectedCls); 
       } 
      } 
     }); 
    } 
})(jQuery); 

Answer 1

编辑： 新的代码切换到function(){...}格式和查找一个点击事件的输入元件上然后检查是否它的一个单选按钮并且该父.row然后将其添加的bold和ez-selected类单选按钮并从其他收音机中删除它们。

$("input").click(function() { 
    if($(this).attr('type') == 'radio' && $(this).parents('.row').length > 0){ 
     $("input").closest('.row').removeClass('bold ez-selected'); 
     $(this).addClass('bold ez-selected'); 
    } 
}) 

Answer 2

你的代码看起来有点像这样：

<script type="text/javascript"> 
    $(function() { 
     $("input[type='radio']").click(function(e) { 
      var targ = e.target 
      $("div[class='row'][class='bold']).removeClass('bold'); 
      $(targ).parents('div[class="row"]').addClass('bold'); 
     }) 

     $(".ez-selected").closest('.row').addClass("bold"); 
    }); 
</script>