javascript - ファンシーボックスでテキストボックスのクリックイベントが発生しない

Question

次のように、asp.net MVC アプリケーションでjquery fancyboxを使用しています。

 $.fancybox.open([$("#AddCallRecordingPopup")], {
                            helpers: {
                                width: 600,
                                title: null,
                                autoHeight: true,
                                overlay: {
                                    css: {
                                        cursor: 'auto'
                                    },
                                    closeClick: false
                                }
                            }

                        });

ファンシーボックスが見えます。fancybox の HTML は次のとおりです。

                    <div id="AddCallRecordingPopup" title="Add Call Recording" style="display: none"
            class="popup-dv">           
 <input type="text" value="" title="Click here to enter a telephone number" name="NumberCalledTo" id="NumberCalledTo" class="normal phone required" autocomplete="off">
 </div>

以下のjsを使用して、fancyboxにあるテキストボックスでクリックイベントを発生させようとしています

 var $inputs = $(".phone"), $selects = $('.dialprefix');  

    $inputs.click(function () {
        /* get index of active input and use to match select*/
        var idx = $inputs.index(this), $sel = $selects.eq(idx);
        var dialprefix = $sel.val();
        var Id = $sel.attr('id');

        $(this).focus();
        var phone = $(this).val();
        var phoneId = $(this).attr('id');
        $("#PhoneNumber").val(phone);
        $("#SelecteddialprefixId").val(Id);
        $("#SelectedPhoneId").val(phoneId);

    })

しかし、私は得ています:

TypeError: element.prop(...) is undefined
[Break On This Error]   

rez  = element.prop('class').match(/fancybox\.(\w+)/);

これは、テキストボックスをクリックしたときにのみ発生します。Fancybox が閉じ、エラーが表示されます。$inputs.clickでfancyboxとのjqueryの衝突があると思います。それに対する解決策を提案してください。