jQuery UI Dialog not opened for second time - html

Question

jQuery UI Dialog not opened for second time
I have series of data as below
html
<a href="javascript:void(0);" class="popup_1" pop_val="abc" >Dummy Text</a>
<a href="javascript:void(0);" class="popup_1" pop_val="vbg" >Dummy Text</a>
<a href="javascript:void(0);" class="popup_1" pop_val="aere" >Dummy Text</a>
<a href="javascript:void(0);" class="popup_1" pop_val="vbb" >Dummy Text</a>
<div id="dialog" title="TEST MODAL">
Loading...
</div> <!-- dialog -->
jQuery
Script One
This one runs perfect
<script>
$(".popup_1").bind('click', function (e) {
var pop_value = $(this).attr("pop_val");
console.log(pop_value);
$("#dialog").dialog({
autoOpen: false,
width: 700,
modal: true,
});
$("#dialog").dialog("open");
});
</script>
Script Two
This script, runs for the first time and second time its not working,
instead it gives an error
Uncaught TypeError: Object [object HTMLAnchorElement] has no method
'attr'
[ var pop_value = $(this).attr("pop_val"); ]
<script>
$(".popup_1").bind('click', function (e) {
var pop_value = $(this).attr("pop_val");
console.log(pop_value);
$("#dialog").dialog({
autoOpen: false,
width: 700,
modal: true,
});
$.post("ajx_page.cfm?PID="+pop_value, {}, function(return_data){
$("#dialog").html(return_data);
});
$("#dialog").dialog("open");
});
</script>
I have no clue, why it throws an error. I have gone throught other question on SO, but could not get perfect solution.