2 JavaScript функции не работает при использовании вместе

Question

У меня есть небольшое popover окно, которое я называю с этой функцией:

$('.pop').popover({ 
    html: true, 
    title: function() { 
     return $("#popover-head").html(); 
    }, 
    content: function() { 
     $('#hidden-input').val(this.id); 
     return $("#popover-content").html(); 
    } 
}); 

У меня есть еще одна функция JS, которая проверяет выбор флажок убедившись, по крайней мере, один был выбран

// required checkboxes 
var requiredCheckboxes = $("#car").find(':checkbox[required]'); 

requiredCheckboxes.change(function(){ 
    if(requiredCheckboxes.is(':checked')) { 
     requiredCheckboxes.removeAttr('required'); 
    } 
    else { 
     requiredCheckboxes.attr('required', 'required'); 
    } 
}); 

Оба работают правильно, пока не пользуюсь функцией checkbox внутри окна popover.

Любые решения для объединения этих двух?

Edit:

HTML:

<!-- Popup select table --> 
<div id="popover-head" class="hide"> 
    Select Animal 
</div> 
<div id="popover-content" class="hide"> 
    <form method="post" id="car"> 
<fieldset> 
    <legend>What is Your Favorite Pet?</legend> 
    <input type="checkbox" name="animal" value="Cat" required/>Cats 
    <br /> 
    <input type="checkbox" name="animal" value="Dog" required />Dogs<br /> 
    <input type="checkbox" name="animal" value="Bird" required />Birds<br /> 
    <input type="submit" value="Submit now" /> 
</fieldset> 
</form> 
</div> 

Answer 1

Поместите функцию проверки флажок для поповер обратного вызова.

$('.pop').popover({ 
    html: true, 
    title: function() { 
     return $("#popover-head").html(); 
    }, 
    content: function() { 
     $('#hidden-input').val(this.id); 
     return $("#popover-content").html(); 
    }, 
    callback: function(){ 
    // validation codes 
    } 
}); 

Answer 2

Возможно, проблема связана с отсутствием флажков при выполнении этого второго сегмента кода.

Скорее делегировать изменения слушателя к телу:

$("body").on('change', '#cars :checkbox[required]', function() { ... });