Question: I'm trying to create a selectable list that when you click on an item, it displays an input field that you can use to edit the description but until the item is clicked on, the input field is hidden. 

However, when I select an item and then click on the input field, it unselects the item and the input field is hidden again.

I've recreated the issue [here](https://jsbin.com/dekuka/edit?html,css,js,output) with just one list item. How can I allow for the user to click in the input field without triggering the jQuery function?

Also, the user will be able to click multiple items in the list so I've updated the jsbin with a second item.

Answer: 
If you don't want to change the html arrangement of the input , you can prevent the event propagation on click of the input element to its parent which in turn will avoid any class toggle.

The only addition you need is this.

```
$('.fund input').click(function(e) {
  e.stopPropagation();
});

```

Here is the working sample 

```js
$('.fund').click(function() {
  $(this).toggleClass('selected');
});
$('.fund input').click(function(e) {
  e.stopPropagation();
});
```

```css
* {
  font-family: 'Lato', sans-serif;
}
.fund {
  background-color: #fff;
  width: 500px;
  border: 1px solid #444;
  height: 50px;
  padding: 0 10px;
  border-radius: 3px;
}
.fund:hover {
  background-color: #efefef;
  cursor: pointer;
}
.fund .description,
.fund .alt-description {
  width: 50%;
  float: left;
}
.fund .description {
  line-height: 50px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: #555;
}
.fund .alt-description {
  visibility: hidden;
  line-height: 50px;
  font-size: 14px;
}
.fund .alt-description input {
  height: 30px;
  font-size: 12px;
}
.fund.selected {
  border: 1px solid #00cc00;
}
.fund.selected .description {
  color: #00cc00;
}
.fund.selected .alt-description {
  visibility: visible;
}
```

```html
<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="[be able to click in input but don't toggle div]">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <title>JS Bin</title>
</head>

<body>
  <div class='fund'>
    <div class='description'>
      Fund Name
    </div>
    <div class='alt-description'>
      Description:
      <input type='text' value='Fund Name'>
    </div>
  </div>
</body>

</html>
```
Here I change the javascript a little. 

```html
$('.fund').click(function() {
  if(!$(this).hasClass('selected')){
   $(this).toggleClass('selected'); 
  }
});
```

So when ever the div with the .fund class has a class selected don't toggle the class.