Error finding e.target using jQuery event delegation

Question

I use jQuery event delegation to get a click event on this markup(el contains multiple checkboxContainer s,which is why I would like to delegate the event on .checkboxContainer to the parent el .The click can happen on .checkboxContainer or any of it's children ):

  <div class="checkboxContainer" id="equi-select">
     <span role="checkbox" class="checkboxSpan ">
        <div class="blankDiv" style="display: block;">
           <img class="blankImg" src="http://maps.gstatic.com/mapfiles/mv/imgs8.png">
        </div>
       </span>
       <label class="checkboxLabel">Equipment</label>
  </div>

This is my jQuery code:

 el.on("click",".checkboxContainer",function(e){
    var $parent;
    if($(e.target).hasClass(".checkboxContainer"))
        $parent=$(e.target);
    else
        $parent=$(e.target).parents(".checkboxContainer").eq(0);
    var res=$parent.attr("id");
    var objtype=res.substring(0,4);//error here
    var $blankDiv=$parent.find(".blankDiv");
    console.log($blankDiv.css("display"));
    if($blankDiv.css("display")==="none")
    {
        console.log(objtype);
        $blankDiv.css("display","block");
        //make ajax requests to get data from server
     }
     else
        $blankDiv.css("display","block");
 });

This is the error:

Uncaught TypeError: Cannot read property 'substring' of undefined

How can I improve the targeting of my events?

Answer 1

将toString（）方法添加到要添加的行中

var res=$parent.attr("id").toString();